JavaScript - Adding a stylesheet to an iframe

JavaScript/Ajax Add comments

There are occasions when you do not know what stylesheet to use at design time and must make this decision at runtime. Depending on your target audience JavaScript may be the method you wish to use to implement this.

To any developer that is familiar with JavaScript, DOM in particular, they may think this will be a simple task. Well, it should be but Internet Explorer doesn’t play nice in this case. Should we be surprised?

The logical, and standards compliant way, would be to do this.

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

Seems simple enough. Now this method will work when applying the stylesheet to the parent page but if you use this method to apply it to the head of an iframe then you will get problems in IE.

Let’s take a look at some code, assuming we have an iframe on the page witht he name “frame”:

var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";

var iframe;
if(document.frames)
	iframe = document.frames["frame"];
else
	iframe = window.frames["frame"];
iframe.document.getElementsByTagName("head")[0].appendChild(ss);

You would expect the the above code to work, and it does in every browser except IE. Now this stumped me for quite a while. I search all over Google in search for a solution. After a lot of searching I did find the answer, Google truly is your friends. The code below will work cross browser and apply your stylesheet to your iframe.

var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";

var iframe;
if(document.frames)
	iframe = document.frames["frame"];
else
	iframe = window.frames["frame"];
if(document.all)
	iframe.document.createStyleSheet(ss.href);
else
	iframe.document.getElementsByTagName("head")[0].appendChild(ss);

Hopefully this saves you some searching and frustration.

Did You Enjoy This Post?

Be sure to grab my RSS feed so you don't miss out on more great articles.

This Post Was Brought To You By

How do I save time? I use FreshBooks for invoicing.

Get Information Technology magazine subscriptions and white papers for FREE!

JavaScript - Adding a stylesheet to an iframe

10 Responses to “JavaScript - Adding a stylesheet to an iframe”

  1. Pat Says:

    I was wondering if you’d gotten this to work with Safari?

    iframe.document.getElementsByTagName(”head”)[0]
    is coming up undefined.

  2. Justin Says:

    I am afraid I have not tested this on Safari. I don’t have a MAC or access to one.

    If anyone has a solution to this feel free to submit and I’ll add it to the article, with credit of course.

  3. Fred Says:

    You should not use if(document.all) because it will catch also Opera, better is if(document.uniqueID)

  4. Hiding a Class if JavaScript is Disabled | Web Developer Blog Says:

    […] Geek Daily Blog […]

  5. vivmedia.net » Blog Archive » Say “Yes” to CSS — on eBay! Says:

    […] Side Note: evidently if you use <iframe> tags in IE (not the best idea, we say, but we won’t debate you on it here), there are issues with dynamically assigning a stylsheet reference to the HTML in the iframe; and that’s what the Geek Daily guys were really talking about. For the full article, including a possible solution to that issue, see the Geek Daily blog entry. […]

  6. Connie Says:

    http://newsday.design.tii.trb/travel/

    I want the reservation widget to be a certain size and to be controlled by my CSS. It resides on another domain. I tried this script and others like it, but they don’t load in the CSS on that iframe at all. What am I doing wrong?

  7. JoelStarnes: » Blog Archive » CodeWord > update Says:

    […] the rules array. Futhermore an iframe in IE dosen’t have a contentDocument, I found a post on geek daily about a similar problem that he solved calling iframes.document, but I’ve battled away to no […]

  8. bart Says:

    Unfortunately, firebug is telling me the value iframe.document (In the last line of the code) is undefined?

    Any ideas on that?

  9. Justin Says:

    @bart,

    This may be a dumb question but you do have an iframe on your page with name=”frame” and id=”frame” right?

  10. bart Says:

    that’s what it basically comes down to yeah..

    I added your code (as is) as a .js to a page (using drupal) and added an iframe with name/id according to whats in .js

Leave a Reply

WP Theme & Icons by N.Design Studio
Entries RSS Login