JavaScript - Adding a stylesheet to an iframe
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.
RSS ?
12 comments on this post
I was wondering if you’d gotten this to work with Safari?
iframe.document.getElementsByTagName(”head”)[0]
is coming up undefined.
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.
You should not use if(document.all) because it will catch also Opera, better is if(document.uniqueID)
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?
Unfortunately, firebug is telling me the value iframe.document (In the last line of the code) is undefined?
Any ideas on that?
@bart,
This may be a dumb question but you do have an iframe on your page with name=”frame” and id=”frame” right?
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
Great post. Just what I needed.
I was just wondering, is there a way to apply the css to all the iframes on the page without specifying the names?
There are other ways of accomplishing this, without having to go to all this trouble. I won’t implement the solution here but will rather give you the main idea….
step 1. Create a “dummy” html page or use the page you intend to display in the IFRAME instead.
step 2. From the parent modify the SRC attribute of the IFRAME to send the stylesheet(s) name(s) in the url.hash, i.e.:
iframeObj.src = /mydummypage.html#style=girly.css
Step 3. From the other side (page created in the step 1) which is at this point loaded on the iframe, read the location hash and parse it, i.e.:
var hash = document.location.hash
var arr = hash.split(/=/);
var stylesheetname = arr[1];
Step 4. From the other side (page created in the step 1) which is at this point loaded on the iframe and contains a variable holding the name of your stylesheet, insert the stylesheet element into the HEAD section. ie.
var ss = document.createElement(”link”);
ss.type = “text/css”;
ss.rel = “stylesheet”;
ss.href = stylesheetname;
document.getElementsByTagName(”head”)[0].appendChild(ss);
Voila!
3 Trackback(s)