iFrame je velmi pohodlný způsob, jak zobrazit externí obsah na své webové stránky. Je však trochu komplikované, pokud chcete přidat další nebo změnit stávající styl CSS. CSS nelze jednoduše přidat na stránku rodič / obal. V tomto tutoriálu vám ukážeme, jak používat JavaScript pro vložení CSS do iFrame.
v níže uvedeném úryvku, jakmile bude vše načteno,dostaneme prvek iFrame ID. Pak si contentDocument a aplikovat naše styly do iFrame pomocí innerHTML.,
nebo to můžete udělat s jQuery.
$("#myiFrame").on("load", function() { let head = $("#myiFrame").contents().find("head"); let css = '<style>/********* Put your styles here **********</style>'; $(head).append(css);});
příklad
například zde je výuková stránka 3D CSS Progressbar, kterou chceme přidat do našeho pomocí iframe.
<iframe width="1024px" height="768px" src="http://127.0.0.1:5501/bar"></iframe>
Předpokládejme, že chceme změnit délku progress bar na 45%. Bohužel, něco takového nemůžeme udělat z naší mateřské CSS.
.bar { width: 45%; /* This will not work */}
zkusme použít JavaScript. Je důležité, že budete muset počkat, až bude iFrame načten, než budete moci vložit CSS., V tomto případě vložíme kód do posluchače událostí onload.
zde je výsledek.
Přidání CSS Souboru, aby se iFrame
můžete přidat celý CSS soubor namísto vstřikování oddělené styly tím, že vytvoří odkaz a přidejte jej do iframe hlavu.