Hoe pas ik CSS toe op iframe?

Ik heb een eenvoudige pagina die een aantal iframe secties heeft (om RSS links weer te geven). Hoe kan ik dezelfde CSS opmaak van de hoofdpagina toepassen op de pagina die in het iframe wordt weergegeven?

Als de inhoud van het iframe niet volledig onder uw controle is of als u de inhoud van verschillende pagina's met verschillende stijlen wilt benaderen, kunt u proberen het te manipuleren met 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);

Merk op dat dit, afhankelijk van de browser die je gebruikt, alleen kan werken op pagina's van hetzelfde domein.

Commentaren (2)

Een iframe wordt door de meeste browsers universeel behandeld als een andere HTML pagina. Als je hetzelfde stylesheet wilt toepassen op de inhoud van het iframe, verwijs je er gewoon naar vanaf de pagina's die erin gebruikt worden.

Commentaren (1)

Als je de pagina in het iframe controleert, zoals hangy zei, is de makkelijkste aanpak om een gedeeld CSS bestand te maken met gemeenschappelijke stijlen, en er dan gewoon naar te linken vanuit je html pagina's.

Anders is het onwaarschijnlijk dat je dynamisch de stijl van een pagina kunt veranderen vanaf een externe pagina in je iframe. Dit komt omdat browsers de beveiliging op cross frame dom scripting hebben aangescherpt vanwege mogelijk misbruik voor spoofing en andere hacks.

Deze tutorial kan je meer informatie geven over het scripten van iframes in het algemeen. Over cross frame scripting legt de veiligheidsbeperkingen uit vanuit het IE perspectief.

Commentaren (0)