Wie wendet man CSS auf iframe an?

Ich habe eine einfache Seite, die einige Iframe-Abschnitte enthält (um RSS-Links anzuzeigen). Wie kann ich das gleiche CSS-Format von der Hauptseite auf die im Iframe angezeigte Seite anwenden?

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

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 nur auf Seiten funktioniert, die von derselben Domäne stammen.

Kommentare (2)

Ein iframe wird von den meisten Browsern wie eine andere HTML-Seite behandelt. Wenn Sie dasselbe Stylesheet auf den Inhalt des iframe anwenden wollen, referenzieren Sie es einfach von den darin verwendeten Seiten.

Kommentare (1)

Wenn Sie die Seite im Iframe kontrollieren, ist es am einfachsten, eine gemeinsame CSS-Datei mit gemeinsamen Stilen zu erstellen, auf die Sie dann von Ihren HTML-Seiten aus verlinken.

Ansonsten ist es unwahrscheinlich, dass Sie den Stil einer Seite von einer externen Seite in Ihrem Iframe dynamisch ändern können. Der Grund dafür ist, dass die Browser die Sicherheitsvorkehrungen für Frame-übergreifendes Dom-Scripting wegen des möglichen Missbrauchs für Spoofing und andere Hacks verschärft haben.

In diesem Tutorial finden Sie weitere Informationen über das Skripting von Iframes im Allgemeinen. In About cross frame scripting werden die Sicherheitseinschränkungen aus Sicht des IE erläutert.

Kommentare (0)