Wie wende ich CSS auf iframe an?

1017

Ich habe eine einfache Seite mit einigen Iframe-Abschnitten (um RSS-Links anzuzeigen). Wie kann ich dasselbe CSS-Format von der Hauptseite auf die im Iframe angezeigte Seite anwenden?

Akshay Mulgavkar
quelle
66
Es ist möglich, aber nur, wenn die Domain des
Iframes
13
gawpertron, nur um zu verdeutlichen, sagen Sie, wenn ich iFrame-Inhalte aus einer anderen Domäne verwende, die ich nicht kontrolliere, gibt es für mich keine Möglichkeit, das CSS für diese Inhalte zu kontrollieren?
Ville M
Können Sie einen Link zu der Seite auflisten, damit wir möglicherweise nur unsere Änderungen anzeigen können?
5
Die Domain, der Port und das Protokoll müssen identisch sein und funktionieren auch nicht mit Subdomains.
Lee Penkman

Antworten:

434

Bearbeiten: Dies funktioniert nicht domänenübergreifend, es sei denn, der entsprechende CORS-Header ist festgelegt.

Hier gibt es zwei verschiedene Dinge: den Stil des Iframe-Blocks und den Stil der im Iframe eingebetteten Seite. Sie können den Stil des Iframe-Blocks wie folgt festlegen:

<iframe name="iframe1" id="iframe1" src="empty.htm" 
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 100%; height: 120px;"></iframe>

Der Stil der in den Iframe eingebetteten Seite muss entweder durch Einfügen in die untergeordnete Seite festgelegt werden:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

Oder es kann von der übergeordneten Seite mit Javascript geladen werden:

var cssLink = document.createElement("link");
cssLink.href = "style.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 
frames['iframe1'].document.head.appendChild(cssLink);
Tamas Czinege
quelle
30
Bitte beachten Sie, es scheint mir, dass einige der zuvor veröffentlichten Beispiele jetzt für HTML5 ungültig sind. Sie können wie folgt auf den Inhalt des Frames zugreifen : document.getElementById("myframe").contentDocument. Das Einbetten des CSS scheint für mich immer noch nicht zu funktionieren.
Rehno Lindeque
35
Link kann nur in der HEAD
Knu
18
Arbeitete nur für mich, als ich es tat ...document.head.appendChild(cssLink)- Firefox und Safari.
Mojuba
24
Funktioniert das tatsächlich domänenübergreifend? Ich glaube nicht.
Simon East
89
Nur damit no1 es sonst testen muss, um herauszufinden: Richtig, es funktioniert nicht domänenübergreifend. Unmittelbar nach dem Ausführen von Frames ['Name'] erhalten Sie "Unsicherer JavaScript-Versuch, auf Frame mit URL bla von Frame mit URL bla zuzugreifen. Domänen, Protokolle und Ports müssen übereinstimmen."
Kevin
205

Ich habe dieses Problem mit Google Kalender festgestellt . Ich wollte es auf einem dunkleren Hintergrund stylen und die Schriftart ändern.

Glücklicherweise hatte die URL aus dem Einbettungscode keine Einschränkung für den direkten Zugriff, also mithilfe der PHP-Funktion file_get_contents es also möglich, den gesamten Inhalt von der Seite abzurufen. Anstatt die Google-URL aufzurufen, können Sie auch eine PHP-Datei auf Ihrem Server aufrufen, z. google.php, der den ursprünglichen Inhalt mit Änderungen enthält:

$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');

Hinzufügen des Pfads zu Ihrem Stylesheet:

$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);

(Dadurch wird Ihr Stylesheet zuletzt kurz vor dem headEnd-Tag platziert.)

Geben Sie die Basis-URL der ursprünglichen URL an, falls css und js relativ aufgerufen werden:

$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);

Das endgültige google.php Datei sollte folgendermaßen aussehen:

<?php
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
echo $content;

Dann ändern Sie die iframe Einbettungscode in:

<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Viel Glück!

SequenceDigitale.com
quelle
71
Sie können das Hacken per Definition nennen, wenn Sie möchten. Aber Sie haben keine bessere Lösung angeboten ... Diese Lösung ist keine Möglichkeit, den Google-Dienst zu beschädigen oder Menschen dazu zu bringen, ihre Schwäche auszunutzen.
SequenceDigitale.com
5
Ich würde töten, um diese Lösung mit Google Docs zum Laufen zu bringen. Es wirft alle möglichen Javascript-Fehler. "Nicht gefangener Typfehler: Eigenschaft 'a' von undefiniert kann nicht gelesen werden"
Deweydb
1
Nevermind, ich habe es herausgefunden, hat die Lösung hier gepostet: stackoverflow.com/questions/25395279/…
Deweydb
9
@ ChrisHoughton FYI, es ist im Grunde nicht. Dies kann jedoch dazu führen, dass der gesamte Iframe sinnlos wird (ein Grund für die Verwendung von Iframes besteht beispielsweise aus Sicherheitsgründen, z. B. bei Kartenzahlungen, und wenn Sie die hier vorgeschlagenen Schritte ausführen, verursachen Sie wahrscheinlich selbst Probleme).
Alastair
10
Auf diese Weise erhalten Sie den Kalender immer als nicht angemeldeter Benutzer. Mit dem normalen HTML-Iframe würde der Benutzer seinen eigenen persönlichen Kalender sehen, wenn er bei Google angemeldet wäre. Da Ihr PHP-Code jedoch die Google-Sitzungs-ID des Benutzers nicht kennt, kann er seinen persönlichen Kalender nicht abrufen.
BDSL
72

Wenn der Inhalt des Iframes nicht vollständig unter Ihrer Kontrolle steht oder Sie von verschiedenen Seiten mit unterschiedlichen Stilen auf den Inhalt zugreifen möchten, können Sie versuchen, ihn mit JavaScript zu bearbeiten.

var frm = frames['frame'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);

Beachten Sie, dass dies je nach verwendetem Browser möglicherweise nur auf Seiten funktioniert, die von derselben Domain bereitgestellt werden.

Horst Gutmann
quelle
82
Es kann erwähnenswert sein, dass dieselbe Ursprungsrichtlinie diese Funktion beendet, wenn sich die Seite in einer anderen Domäne befindet.
ConroyP
2
In der gleichen Denkrichtung, aber prägnanter: <iframe onload="this.contentDocument.body.style.overflow='hidden';" />
Beschützer
Sogar Firefox ist gegangen CORS
59
var $head = $("#eFormIFrame").contents().find("head");

$head.append($("<link/>", {
    rel: "stylesheet",
    href: url,
    type: "text/css"
}));
Rami Sarieddine
quelle
@deweydb Ich habe es mit einem domänenübergreifenden Iframe speziell verwendet. aber ich kann nur um Vergebung bitten!
Rami Sarieddine
@ramie und du hast das in mehreren Browsern getestet? Die meisten Browser geben einen Sicherheitsfehler aus.
Deweydb
Ich habe diese Idee schon einmal gesehen, aber füge einen Link hinzu, um sie wirklich großartig und professionell
einzureichen
29

Ein Iframe wird von den meisten Browsern universell wie eine andere HTML-Seite behandelt. Wenn Sie dasselbe Stylesheet auf den Inhalt des Iframes anwenden möchten, verweisen Sie einfach auf die dort verwendeten Seiten.

Hangy
quelle
22
@hangry aber ... wie?
Ein Kind Gottes
29

Hier erfahren Sie, wie Sie CSS-Code direkt anwenden, ohne <link>ein zusätzliches Stylesheet laden zu müssen.

var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
          '#banner{display:none}; ' +
          '</style>';
jQuery(head).append(css);

Dadurch wird das Banner auf der Iframe-Seite ausgeblendet. Vielen Dank für Ihre Vorschläge!

domih
quelle
1
Benötigt dies einen Iframe mit der ID von iframe?
Jeremy
1
@jmalais Ersetzen Sie einfach #iframemit #<id>oder sogar iframealle auszuwählen iframes
Zeb McCorkle
3
Das scheint bei mir nicht zu funktionieren. Der Iframe, den ich zu bearbeiten versuche, hat auch keinen Kopf direkt darunter im Dom. Bedeutet das also, dass ich auf den Kopf innerhalb des HTML-Dokuments zugreifen muss, oder sollte die Funktion jquery find dies selbst tun können?
David A. French
1
Überprüfte die Konsole und es sieht so aus, als ob der Zugriff auf den Iframe-Inhalt aufgrund einer Domäneninkongruenz blockiert wurde. Ich verwende Chrome und hoste meine Entwicklungsumgebung derzeit lokal.
David A. French
Ungefangene DOMException: Blockiert einen Frame mit Ursprung, es gibt mir diesen Fehler
Priyanka Patel
26

Wenn Sie die Seite im Iframe steuern, wie Hangy sagte, besteht der einfachste Ansatz darin, eine gemeinsam genutzte CSS-Datei mit allgemeinen Stilen zu erstellen und dann einfach von Ihren HTML-Seiten aus darauf zu verlinken.

Andernfalls ist es unwahrscheinlich, dass Sie den Stil einer Seite von einer externen Seite in Ihrem Iframe dynamisch ändern können. Dies liegt daran, dass Browser die Sicherheit bei Cross-Frame-Dom-Skripten aufgrund eines möglichen Missbrauchs für Spoofing und andere Hacks verschärft haben.

In diesem Tutorial erhalten Sie möglicherweise weitere Informationen zum Erstellen von Skripten für Iframes im Allgemeinen. Über Cross-Frame-Scripting werden die Sicherheitsbeschränkungen aus der IE-Perspektive erläutert.

Asche
quelle
19

Das obige mit einer kleinen Änderung funktioniert:

var cssLink = document.createElement("link") 
cssLink.href = "pFstylesEditor.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 

//Instead of this
//frames['frame1'].document.body.appendChild(cssLink);
//Do this

var doc=document.getElementById("edit").contentWindow.document;

//If you are doing any dynamic writing do that first
doc.open();
doc.write(myData);
doc.close();

//Then append child
doc.body.appendChild(cssLink);

Funktioniert gut mit ff3 und ie8

Eric
quelle
7
Was ist myData und woher kommt es
Tigran
1
@ Tigran ist es fürdynamic data
Akash
13

Wenn Sie CSS und JavaScript von der Hauptseite aus wiederverwenden möchten, sollten Sie möglicherweise das Ersetzen in Betracht ziehen <IFRAME> durch einen von Ajax geladenen Inhalt zu . Dies ist jetzt SEO-freundlicher, wenn Such-Bots JavaScript ausführen können.

Dies ist ein jQuery- Beispiel, das eine weitere HTML-Seite in Ihr Dokument einfügt. Dies ist viel SEO-freundlicher als iframe. Um sicherzugehen, dass die Bots die enthaltene Seite nicht indizieren, fügen Sie sie einfach hinzu, um sie nicht zuzulassenrobots.txt

<html>
  <header>
    <script src="/js/jquery.js" type="text/javascript"></script>
  </header>
  <body>
    <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 
  </body>
</html>

Sie können jQuery auch direkt von Google einbinden : http://code.google.com/apis/ajaxlibs/documentation/ - dies bedeutet die optionale automatische Aufnahme neuerer Versionen und eine erhebliche Geschwindigkeitssteigerung. Bedeutet auch, dass Sie ihnen vertrauen müssen, um Ihnen nur die jQuery zu liefern;)

Sorin
quelle
1
Man sollte beachten, dass diese Lösung nicht funktioniert, wenn der Inhalt der Seite in irgendeiner Weise dynamisch ist.
Nickdnk
12

Folgendes hat bei mir funktioniert.

var iframe = top.frames[name].document;
var css = '' +
          '<style type="text/css">' +
          'body{margin:0;padding:0;background:transparent}' +
          '</style>';
iframe.open();
iframe.write(css);
iframe.close();
Peter
quelle
1
Fehler:Uncaught TypeError: Cannot read property 'open' of undefined
KingRider
10

Erweiterung der obigen jQuery-Lösung, um Verzögerungen beim Laden des Frame-Inhalts zu bewältigen.

$('iframe').each(function(){
    function injectCSS(){
        $iframe.contents().find('head').append(
            $('<link/>', { rel: 'stylesheet', href: 'iframe.css', type: 'text/css' })
        );
    }

    var $iframe = $(this);
    $iframe.on('load', injectCSS);
    injectCSS();
});
David Bradshaw
quelle
1
Das '$ this' muss ein '$ (this)' sein, damit es funktioniert. Schön, wenn es so ist :)
h.coates
9

Meine kompakte Version :

<script type="text/javascript">
$(window).load(function () {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }   
});
</script>

Manchmal iframeist das Fenster jedoch nicht geladen, sodass ein Timer verwendet werden muss .

Gebrauchsfertiger Code (mit Timer):

<script type="text/javascript">
var frameListener;
$(window).load(function () {
    frameListener = setInterval("frameLoaded()", 50);
});
function frameLoaded() {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            clearInterval(frameListener); // stop the listener
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }
}
</script>

... und jQuery Link:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
Zbigniew Wiadro
quelle
8

Andere Antworten hier scheinen jQuery- und CSS-Links zu verwenden.

Dieser Code verwendet Vanille-JavaScript. Es entsteht ein neues <style>Element. Der Textinhalt dieses Elements wird als Zeichenfolge festgelegt, die das neue CSS enthält. Dieses Element wird direkt an den Kopf des Iframe-Dokuments angehängt.

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  '.some-class-name {' +
  '  some-style-name: some-value;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);
2540625
quelle
7

Wenn Sie "doc.open ()" sagen, bedeutet dies, dass Sie jedes HTML-Tag in den Iframe schreiben können. Sie sollten also alle grundlegenden Tags für die HTML-Seite schreiben. Wenn Sie einen CSS-Link in Ihrem Iframe-Kopf haben möchten, schreiben Sie einfach einen Iframe mit CSS-Link. Ich gebe Ihnen ein Beispiel:

doc.open();

doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-quiv="Content-Type" content="text/html; charset=utf-8"/><title>Print Frame</title><link rel="stylesheet" type="text/css" href="https://stackoverflow.com/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>');

doc.close();
Parham Fazel
quelle
7

Verwendung kann dies versuchen:

$('iframe').load( function() {
     $('iframe').contents().find("head")
     .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
  });
Ajay Malhotra
quelle
3
Wenn Ihr Iframe von einem anderen Ursprung stammt, lässt der CORS-Mechanismus diese Problemumgehung nicht zu.
Mr. Anderson
Was ist, wenn die iframe-URL für alle Standorte CORS-fähig ist?
Adrrc
6

Sie können den Inhalt des Iframes nicht auf diese Weise formatieren. Mein Vorschlag wäre, serverseitiges Scripting (PHP, ASP oder ein Perl-Skript) zu verwenden oder einen Onlinedienst zu finden, der einen Feed in JavaScript-Code konvertiert. Die einzige andere Möglichkeit wäre, wenn Sie ein serverseitiges Include ausführen können.

Peter Mortensen
quelle
29
Vorsicht, wenn Sie sagen, dass etwas nicht getan werden kann, wenn es in Wirklichkeit nur schwierig ist
Lathan
4

Falls Sie Zugriff auf die Iframe-Seite haben und möchten, dass ein anderes CSS nur dann auf diese angewendet wird, wenn Sie es über Iframe auf Ihre Seite laden, habe ich hier eine Lösung für diese Art von Dingen gefunden

Dies funktioniert auch, wenn iframe eine andere Domain lädt

Überprüfen Sie über postMessage()

Plan ist, senden Sie die CSS an iframe als Nachricht wie

iframenode.postMessage('h2{color:red;}','*');

* soll diese Nachricht unabhängig von der Domain im Iframe senden

und empfangen Sie die Nachricht in iframe und fügen Sie die empfangene Nachricht (CSS) zu diesem Dokumentkopf hinzu.

Code zum Hinzufügen in der Iframe-Seite

window.addEventListener('message',function(e){

    if(e.data == 'send_user_details')
    document.head.appendChild('<style>'+e.data+'</style>');

});
CodeRows
quelle
4

Da viele Antworten für dieselben Domains geschrieben wurden, werde ich schreiben, wie dies in domänenübergreifenden Anwendungen gemacht wird.

Zunächst müssen Sie die Post Message API kennen . Wir brauchen einen Messenger, um zwischen zwei Fenstern zu kommunizieren.

Hier ist ein Messenger, den ich erstellt habe.

/**
 * Creates a messenger between two windows
 *  which have two different domains
 */
class CrossMessenger {

    /**
     * 
     * @param {object} otherWindow - window object of the other
     * @param {string} targetDomain - domain of the other window
     * @param {object} eventHandlers - all the event names and handlers
     */
    constructor(otherWindow, targetDomain, eventHandlers = {}) {
        this.otherWindow = otherWindow;
        this.targetDomain = targetDomain;
        this.eventHandlers = eventHandlers;

        window.addEventListener("message", (e) => this.receive.call(this, e));
    }

    post(event, data) {

        try {
            // data obj should have event name
            var json = JSON.stringify({
                event,
                data
            });
            this.otherWindow.postMessage(json, this.targetDomain);

        } catch (e) {}
    }

    receive(e) {
        var json;
        try {
            json = JSON.parse(e.data ? e.data : "{}");
        } catch (e) {
            return;
        }
        var eventName = json.event,
            data = json.data;

        if (e.origin !== this.targetDomain)
            return;

        if (typeof this.eventHandlers[eventName] === "function") 
            this.eventHandlers[eventName](data);
    }

}

Die Verwendung in zwei Fenstern zur Kommunikation kann Ihr Problem lösen.

In den Hauptfenstern

var msger = new CrossMessenger(iframe.contentWindow, "https://iframe.s.domain");

var cssContent = Array.prototype.map.call(yourCSSElement.sheet.cssRules, css_text).join('\n');
msger.post("cssContent", {
   css: cssContent
})

Empfangen Sie dann das Ereignis vom Iframe.

Im Iframe:

var msger = new CrossMessenger(window.parent, "https://parent.window.domain", {
    cssContent: (data) => {
        var cssElem = document.createElement("style");
        cssElem.innerHTML = data.css;
        document.head.appendChild(cssElem);
    }
})

Weitere Informationen finden Sie im vollständigen Tutorial zu Javascript und Iframes .

Supun Kavinda
quelle
3

Ich habe eine andere Lösung gefunden, um den Stil wie folgt in das Haupt-HTML einzufügen

<style id="iframestyle">
    html {
        color: white;
        background: black;
    }
</style>
<style>
    html {
        color: initial;
        background: initial;
    }
    iframe {
        border: none;
    }
</style>

und dann in iframe dies tun (siehe js onload)

<iframe  onload="iframe.document.head.appendChild(ifstyle)" name="log" src="/upgrading.log"></iframe>

und in js

<script>
    ifstyle = document.getElementById('iframestyle')
    iframe = top.frames["log"];
</script>

Es ist möglicherweise nicht die beste Lösung, und es kann sicherlich verbessert werden, aber es ist eine weitere Option, wenn Sie ein "Stil" -Tag im übergeordneten Fenster behalten möchten

jperelli
quelle
3

Hier gibt es zwei Dinge innerhalb der Domäne

  1. iFrame-Bereich
  2. Seite im iFrame geladen

Sie möchten diese beiden Abschnitte also wie folgt gestalten:

1. Stil für den iFrame-Bereich

Es kann mit Hilfe von CSS mit diesem angesehenen Stil idoder classNamen. Sie können es auch einfach in Ihren übergeordneten Stylesheets formatieren.

<style>
#my_iFrame{
height: 300px;
width: 100%;
position:absolute;
top:0;
left:0;
border: 1px black solid;
}
</style>

<iframe name='iframe1' id="my_iFrame" src="#" cellspacing="0"></iframe>

2. Gestalten Sie die im iFrame geladene Seite

Diese Stile können mit Hilfe von Javascript von der übergeordneten Seite geladen werden

var cssFile  = document.createElement("link") 
cssFile.rel  = "stylesheet"; 
cssFile.type = "text/css"; 
cssFile.href = "iFramePage.css"; 

Stellen Sie dann diese CSS-Datei auf den respektierten iFrame-Abschnitt ein

//to Load in the Body Part
frames['my_iFrame'].document.body.appendChild(cssFile); 
//to Load in the Head Part
frames['my_iFrame'].document.head.appendChild(cssFile);

Hier können Sie auch den Hauptteil der Seite im iFrame auf diese Weise bearbeiten

var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead.append(
   $("<link/>",{ 
      rel: "stylesheet", 
      href: urlPath, 
      type: "text/css" }
     ));
K. Suthagar
quelle
2

Wir können ein Style-Tag in den Iframe einfügen. Gepostet auch hier ...

<style type="text/css" id="cssID">
.className
{
    background-color: red;
}
</style>

<iframe id="iFrameID"></iframe>

<script type="text/javascript">
    $(function () {
        $("#iFrameID").contents().find("head")[0].appendChild(cssID);
        //Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]);
    });
</script>
Palanikumar
quelle
1
Das funktioniert nicht. Scheint das Style-Tag korrekt einzufügen, aber es enthält keinen Inhalt und keine ID.
Darylknight
2

var link1 = document.createElement('link');
    link1.type = 'text/css';
    link1.rel = 'stylesheet';
    link1.href = "../../assets/css/normalize.css";
window.frames['richTextField'].document.body.appendChild(link1);

Jeeva
quelle
1
Ich habe diese Antwort oft überprüft. Was ist richTextFieldhier?
Kirankumar Dafda
1
Es ist der Name des Iframes
Jeeva
Ich habe es nicht versucht, aber ich denke, es wird nicht, weil es gegen den Sandkasten ist
Jeeva
1

Ich denke, der einfachste Weg ist, ein weiteres Div an der gleichen Stelle wie der Iframe hinzuzufügen

Machen Sie es z-indexgrößer als den Iframe-Container, damit Sie ganz einfach Ihr eigenes Div stylen können. Wenn Sie darauf klicken müssen, verwenden Sie einfach pointer-events:noneIhr eigenes div, damit der iframe funktioniert, falls Sie darauf klicken müssen;)

Ich hoffe es wird jemandem helfen;)

Mateusz Winnicki
quelle
1

Es gibt ein wunderbares Skript , das einen Knoten durch eine Iframe-Version von sich selbst ersetzt. CodePen- Demo

Geben Sie hier die Bildbeschreibung ein

Anwendungsbeispiele:

// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);

// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
  return iframify(component, {});
});

// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
  headExtra: '<style>.component { color: red; }</style>',
  metaViewport: '<meta name="viewport" content="width=device-width">'
});
Karlisup
quelle
1
Warum willst du das tun?!
Dylan Watson
0

Dies ist nur ein Konzept, aber implementieren Sie dies nicht ohne Sicherheitsüberprüfungen und Filterung! Andernfalls könnte das Skript Ihre Website hacken!

Antwort: Wenn Sie die Zielwebsite steuern, können Sie das Empfängerskript wie folgt einrichten:

1) Setzen Sie den Iframe-Link mit dem styleParameter wie folgt :

http://your_site.com/target.php?color=red

(Die letzte Phrase wird a{color:red} durch die urlencodeFunktion codiert .

2) Stellen Sie die Empfängerseite target.phpwie folgt ein:

<head>
..........
$col = FILTER_VAR(SANITIZE_STRING, $_GET['color']);
<style>.xyz{color: <?php echo (in_array( $col, ['red','yellow','green'])?  $col : "black") ;?> } </style>
..........
T.Todua
quelle
3
Achtung: Dies ist Injektion vom Feinsten.
Kano
1
yap, tu das NICHT, außer du willst eine
Menge
1
Ich habe die Antwort jetzt mit einer zusätzlichen Sicherheitswarnung aktualisiert
T.Todua
-18

Nun, ich habe diese Schritte befolgt:

  1. Div mit einer Klasse zu halten iframe
  2. iframeZum hinzufügen div.
  3. In der CSS-Datei
divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

Dies funktioniert in IE 6. Sollte in anderen Browsern funktionieren, überprüfen Sie!

JannuD
quelle
9
müssen div innerhalb von iframe steuern, dies nicht
MSD