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!
Did you like this post? Be sure to JavaScript - Adding a stylesheet to an iframe
September 27th, 2007 at 11:10 am
I was wondering if you’d gotten this to work with Safari?
iframe.document.getElementsByTagName(”head”)[0]
is coming up undefined.
September 28th, 2007 at 4:12 am
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.
October 4th, 2007 at 9:45 pm
You should not use if(document.all) because it will catch also Opera, better is if(document.uniqueID)
February 10th, 2008 at 8:27 pm
[…] Geek Daily Blog […]
March 9th, 2008 at 3:48 pm
[…] 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. […]
May 1st, 2008 at 7:29 am
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?
July 2nd, 2008 at 6:47 am
[…] 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 […]
August 16th, 2008 at 1:58 am
Unfortunately, firebug is telling me the value iframe.document (In the last line of the code) is undefined?
Any ideas on that?
August 16th, 2008 at 4:19 pm
@bart,
This may be a dumb question but you do have an iframe on your page with name=”frame” and id=”frame” right?
August 17th, 2008 at 5:05 am
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