iFrame ist eine sehr bequeme Möglichkeit, einen externen Inhalt auf Ihrer Webseite anzuzeigen. Es ist jedoch etwas kompliziert, wenn Sie den vorhandenen CSS-Stil hinzufügen oder ändern möchten. Sie können CSS nicht einfach auf der übergeordneten / Wrapper-Seite hinzufügen. In diesem Tutorial zeigen wir Ihnen, wie Sie JavaScript verwenden, um CSS in iFrame einzufügen.
Im folgenden Snippet erhalten wir das iFrame-Element nach ID, sobald alles geladen wurde. Holen Sie sich dann das contentDocument und injizieren Sie unsere Stile mit innerHTML in iFrame.,
, Oder Sie können es mit jQuery.
$("#myiFrame").on("load", function() { let head = $("#myiFrame").contents().find("head"); let css = '<style>/********* Put your styles here **********</style>'; $(head).append(css);});
Beispiel
Zum Beispiel ist hier die 3D CSS Progressbar Tutorial-Seite, die wir mit iframe zu unserer hinzufügen möchten.
<iframe width="1024px" height="768px" src="http://127.0.0.1:5501/bar"></iframe>
Angenommen, wir möchten die Länge des Fortschrittsbalkens auf 45% ändern. Leider können wir so etwas nicht von unserem übergeordneten CSS aus tun.
.bar { width: 45%; /* This will not work */}
Versuchen wir es mit JavaScript. Es ist wichtig, dass Sie warten müssen, bis der iFrame geladen wurde, bevor Sie das CSS einfügen können., In diesem Fall fügen wir den Code in den onload Event Listener ein.
Hier ist das Ergebnis.
Hinzufügen einer CSS-Datei zum iFrame
Sie können die gesamte CSS-Datei hinzufügen, anstatt separate Stile zu injizieren, indem Sie eine Verknüpfung erstellen und sie dem iframe-Kopf hinzufügen.