IFRAME Content Stylee

[Geat]

I've got an IFRAME as the content display for a CMS. Does anyone know of a (javascript) way of applying a style sheet file to the content, without explicity putting the "<link href..." tag inside the actual frames content?

[Jona]

Mozilla's Web site has a document on how to do this, but it does not seem to work on any browser that I've tried it on (Mozilla 1.3, Netscape 6.2, and IE 6.0).

[J]ona

[Fang]

Should be able to do this.
Depending on the content of the iframe, for general changes i.e. img tag:

var ImgArray=IframeName.document.getElementsByTagName('img');
for(var i=0; i<ImgArray.length; i++) {
ImgArray[i].style.border="1px solid red";
}

would change all borders to red. Then something simular for div tags.
Or, add a link tag using the DOM, then swap the style sheet.

[Jona]

Actually, I just remembered--there is a way to completely change the CSS of the page by using the document.styleSheets[] array...

[J]ona

[Geat]

Just in case some of you guys find it useful, this is how I did it:

var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "stylesheet.css";
link.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(link);

There is a method that achieves the same effect, but apparently this approach is better for compatibility reasons...

[Jona]

Cool. :cool:

[J]ona