Verwenden Sie JQuery, um CSS auf Iframe -Inhalten zu ändern

In diesem Beitrag habe ich auch eine Dokumentation fehlgeschlagener Versuche zum Versuch aufgenommen, das CSS von iframed -Inhalten in einer anderen Domäne zu ändern. Auch einige Informationen darüber, wie CSS in einem Iframe auf derselben Domäne geändert werden kann, was (soweit ich weiß) ohne einen Proxy -Pass oder dergleichen nicht durchgeführt werden kann.

Cross Domain Bemühungen

Wie es funktioniert: verglichen URL Ergebnis Grund http://www.example.com/dir/page.html Erfolg Gleiches Protokoll und Host http://www.example.com/dir2/other.html Erfolg Gleiches Protokoll und Host http://www.example.com:81/dir/other.html Versagen Gleiches Protokoll und Host, aber ein anderer Port https://www.example.com/dir/other.html Versagen Verschiedenes Protokoll http://en.example.com/dir/other.html Versagen Anderer Gastgeber http://example.com/dir/other.html Versagen Unterschiedlicher Host (genaue Übereinstimmung erforderlich) http://v2.www.example.com/dir/other.html Versagen Unterschiedlicher Host (genaue Übereinstimmung erforderlich)

Iframe einfügen:

<span>Ways to to change CSS in an iframe
</span><span>Some of these work, and some don't but i've included both for you to ponder amd make up your own decisions.
</span>
<span><span>This</span> method didn't work for me.
</span><span>[js]
</span><span>var text = 'hi';
</span><span>var content = "" + text + "";
</span>
<span>var iframe = document.createElement("iframe");
</span>iframe<span>.src = ' document.body.appendChild(iframe);
</span>
<span>var doc = iframe.document;
</span><span>if(iframe.contentDocument)
</span>doc <span>= iframe.contentDocument; // For NS6
</span><span>else if(iframe.contentWindow)
</span>doc <span>= iframe.contentWindow.document; // For IE5.5 and IE6
</span><span>// Put the content in the iframe
</span>doc<span>.open();
</span>doc<span>.writeln(content);
</span>doc<span>.close();
</span>
doc<span>.getElementsByTagName("body").style.backgroundColor = 'red';</span>

Diese Methode hat bei mir nicht funktioniert.

<span>var cssLink = document.createElement("link")
</span>cssLink<span>.href = "style.css";
</span>cssLink <span>.rel = "stylesheet";
</span>cssLink <span>.type = "text/css";
</span>frames<span>['frame1'].document.body.appendChild(cssLink);</span>

Diese Methode hat für mich funktioniert.

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

Diese Methode hat für mich funktioniert.

var iframe = top.frames [name] .document; var CSS = ” "

häufig gestellte Fragen zum Ändern von CSS in Iframe -Inhalten

Warum kann ich die CSS eines Iframe aus einer anderen Domäne nicht ändern? Es verhindert ein Skript von einer Seite, die auf die Eigenschaften einer anderen Seite von einer anderen Domäne zugreift oder geändert hat. Diese Richtlinie wird implementiert, um zu verhindern, dass potenziell böswillige Skripte auf sensible Daten auf einer anderen Webseite zugreifen. Wenn Sie jedoch die Kontrolle über die Quellseite des Iframe haben, können Sie dort ein Skript hinzufügen, um Nachrichten von der übergeordneten Seite zu empfangen und die erforderlichen Änderungen vorzunehmen. Hier ist ein einfaches Beispiel:

$ ("#myiframe"). Inhalt (). Find ("Körper"). CSS ("Hintergrundfarbe", "rot");

Kann ich JavaScript anstelle von jQuery verwenden, um die CSS eines Iframe zu ändern? So können Sie es tun:

var iframe = document.getElementById ('myiframe'); Iframe.ContentWindow.Document; Der Iframe ist möglicherweise aus einer anderen Domäne. In diesem Fall können Sie das CSS aufgrund der gleichorientierten Richtlinie nicht ändern. Oder der Inhalt des Iframe wurde möglicherweise nicht vollständig geladen, als Sie versucht haben, das CSS zu ändern. Um sicherzustellen, dass der Iframe vollständig geladen ist, können Sie das Ladeereignis verwenden. Änderungen.

Wie kann ich sicherstellen, dass meine CSS -Änderungen nach dem voll geladenen Iframe angewendet werden? So können Sie es mit jQuery:
$ ("#myiframe"). On ("Load", Funktion () {
$ (this) .Contents () find ("Körper"). CSS ("Hintergrundfarbe", "Rot");
});

Kann ich die CSS des Inhalts eines Iframe ändern, wenn es sich um ein PDF handelt?

Nein, Sie können die CSS einer PDF -Datei nicht ändern. CSS ist eine Stylesheet -Sprache, die zum Beschreiben des Erscheinungsbilds und der Formatierung eines in HTML oder XML geschriebenen Dokuments verwendet wird. PDF -Dateien haben ihre eigene Formatierung und können nicht mit CSS gestylt werden.

Kann ich CSS verwenden, um die Größe eines Iframe zu ändern? So können Sie es tun:

iframe {

Breite: 500px;

Höhe: 300px; der Rand eines Iframe. So können Sie es tun:

iframe {

Rand: None;

}

Dies entzieht den Rand des Iframe.

Das obige ist der detaillierte Inhalt vonVerwenden Sie JQuery, um CSS auf Iframe -Inhalten zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!