Jak zastosować CSS do iframe?

Jeśli zawartość iframe nie jest całkowicie pod Twoją kontrolą lub chcesz uzyskać dostęp do zawartości z różnych stron o różnych stylach, możesz spróbować manipulować nią za pomocą JavaScript.

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);

Zauważ, że w zależności od tego, jakiej przeglądarki używasz, może to działać tylko na stronach serwowanych z tej samej domeny.

Ramka iframe jest traktowana przez większość przeglądarek jak inna strona HTML. Jeśli chcesz zastosować ten sam arkusz stylów do zawartości ramki iframe, po prostu odwołaj się do niego ze stron w niej użytych.

Jeśli kontrolujesz stronę w iframe, jak powiedział hangy, najłatwiejszym podejściem jest utworzenie współdzielonego pliku CSS ze wspólnymi stylami, a następnie po prostu link do niego z twoich stron html.

W przeciwnym razie jest mało prawdopodobne, że będziesz w stanie dynamicznie zmieniać styl strony z zewnętrznej strony w ramce iframe. Dzieje się tak dlatego, że przeglądarki zaostrzyły zabezpieczenia dla skryptów domeny cross frame z powodu możliwych nadużyć do spoofingu i innych hacków.

Ten tutorial może dostarczyć Ci więcej informacji na temat skryptowania iframe w ogóle. O skryptach cross frame wyjaśnia ograniczenia bezpieczeństwa z perspektywy IE.