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?
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:
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:
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"
@ 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.
@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.
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!
@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.
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 thisvar 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);
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
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;)
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.
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:
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.
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.
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
*/classCrossMessenger{/**
*
* @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 namevar 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(typeofthis.eventHandlers[eventName]==="function")this.eventHandlers[eventName](data);}}
Die Verwendung in zwei Fenstern zur Kommunikation kann Ihr Problem lösen.
In den Hauptfenstern
var msger =newCrossMessenger(iframe.contentWindow,"https://iframe.s.domain");var cssContent =Array.prototype.map.call(yourCSSElement.sheet.cssRules, css_text).join('\n');
msger.post("cssContent",{
css: cssContent
})
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
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><iframename='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"}));
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;)
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:
Antworten:
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:
Der Stil der in den Iframe eingebetteten Seite muss entweder durch Einfügen in die untergeordnete Seite festgelegt werden:
Oder es kann von der übergeordneten Seite mit Javascript geladen werden:
quelle
document.getElementById("myframe").contentDocument
. Das Einbetten des CSS scheint für mich immer noch nicht zu funktionieren....document.head.appendChild(cssLink)
- Firefox und Safari.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:Hinzufügen des Pfads zu Ihrem Stylesheet:
(Dadurch wird Ihr Stylesheet zuletzt kurz vor dem
head
End-Tag platziert.)Geben Sie die Basis-URL der ursprünglichen URL an, falls css und js relativ aufgerufen werden:
Das endgültige
google.php
Datei sollte folgendermaßen aussehen:Dann ändern Sie die
iframe
Einbettungscode in:Viel Glück!
quelle
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.
Beachten Sie, dass dies je nach verwendetem Browser möglicherweise nur auf Seiten funktioniert, die von derselben Domain bereitgestellt werden.
quelle
<iframe onload="this.contentDocument.body.style.overflow='hidden';" />
quelle
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.
quelle
Hier erfahren Sie, wie Sie CSS-Code direkt anwenden, ohne
<link>
ein zusätzliches Stylesheet laden zu müssen.Dadurch wird das Banner auf der Iframe-Seite ausgeblendet. Vielen Dank für Ihre Vorschläge!
quelle
iframe
?#iframe
mit#<id>
oder sogariframe
alle auszuwähleniframe
sWenn 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.
quelle
Das obige mit einer kleinen Änderung funktioniert:
Funktioniert gut mit ff3 und ie8
quelle
dynamic data
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
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;)
quelle
Folgendes hat bei mir funktioniert.
quelle
Uncaught TypeError: Cannot read property 'open' of undefined
Erweiterung der obigen jQuery-Lösung, um Verzögerungen beim Laden des Frame-Inhalts zu bewältigen.
quelle
Meine kompakte Version :
Manchmal
iframe
ist das Fenster jedoch nicht geladen, sodass ein Timer verwendet werden muss .Gebrauchsfertiger Code (mit Timer):
... und jQuery Link:
quelle
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.quelle
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:
quelle
Verwendung kann dies versuchen:
quelle
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.
quelle
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
*
soll diese Nachricht unabhängig von der Domain im Iframe sendenund 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
quelle
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.
Die Verwendung in zwei Fenstern zur Kommunikation kann Ihr Problem lösen.
In den Hauptfenstern
Empfangen Sie dann das Ereignis vom Iframe.
Im Iframe:
Weitere Informationen finden Sie im vollständigen Tutorial zu Javascript und Iframes .
quelle
Ich habe eine andere Lösung gefunden, um den Stil wie folgt in das Haupt-HTML einzufügen
und dann in iframe dies tun (siehe js onload)
und in js
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
quelle
Hier gibt es zwei Dinge innerhalb der Domäne
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
id
oderclass
Namen. Sie können es auch einfach in Ihren übergeordneten Stylesheets formatieren.2. Gestalten Sie die im iFrame geladene Seite
Diese Stile können mit Hilfe von Javascript von der übergeordneten Seite geladen werden
Stellen Sie dann diese CSS-Datei auf den respektierten iFrame-Abschnitt ein
Hier können Sie auch den Hauptteil der Seite im iFrame auf diese Weise bearbeiten
quelle
Wir können ein Style-Tag in den Iframe einfügen. Gepostet auch hier ...
quelle
quelle
richTextField
hier?Ich denke, der einfachste Weg ist, ein weiteres Div an der gleichen Stelle wie der Iframe hinzuzufügen
Machen Sie es
z-index
größer als den Iframe-Container, damit Sie ganz einfach Ihr eigenes Div stylen können. Wenn Sie darauf klicken müssen, verwenden Sie einfachpointer-events:none
Ihr eigenes div, damit der iframe funktioniert, falls Sie darauf klicken müssen;)Ich hoffe es wird jemandem helfen;)
quelle
Es gibt ein wunderbares Skript , das einen Knoten durch eine Iframe-Version von sich selbst ersetzt. CodePen- Demo
Anwendungsbeispiele:
quelle
Alternativ können Sie die CSS-in-JS-Technologie wie folgt verwenden: lib:
https://github.com/cssobj/cssobj
Es kann JS-Objekte als CSS dynamisch in iframe einfügen
quelle
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
style
Parameter wie folgt :(Die letzte Phrase wird
a{color:red}
durch dieurlencode
Funktion codiert .2) Stellen Sie die Empfängerseite
target.php
wie folgt ein:quelle
Nun, ich habe diese Schritte befolgt:
iframe
iframe
Zum hinzufügendiv
.Dies funktioniert in IE 6. Sollte in anderen Browsern funktionieren, überprüfen Sie!
quelle