Adding styles to a (same domain) iframe not working in IE 8/7

JavaScript
1

Hi,

I’m displaying 2 iframes on a page with content from other pages on the same domain. I’m using jQuery to apply a stylesheet to the 2 iframes by appending it to the head.

$('#col1iframe, #col2iframe').load(function(){
 $(this.contentDocument).find('head').append('<link rel="stylesheet" href="css/iframe-styles.css">');
 $(this.contentDocument).find('a').attr({"target":"_top"});
 $('#col1iframe, #col2iframe').show();
});

It works great in FF, Chrome etc with no errors. IE 8 and 7 just show the un-styled iframe (IE9 is fine).

Any ideas?

2

Try

this.contentWindow.document

or

this.contentWindow.document.documentElement
3

Hi, apologies for the delay!!

Neither of these worked.

This is a list of things I have tried so far…


$('#col1iframe, #col2iframe').load(function(){
	$(this.contentDocument).find('head').append('<link rel="stylesheet" href="css/iframe-styles.css">');
	$(this.contentDocument).find('a').attr({"target":"_top"});
	$('#col1iframe, #col2iframe').show();
});

$('#col1iframe, #col2iframe').load(function(){
	$(this.contentWindow.document).find('head').append('<link rel="stylesheet" href="css/iframe-styles.css">');
	$(this.contentWindow.document).find('a').attr({"target":"_top"});
	$('#col1iframe, #col2iframe').show();
});

$('#col1iframe, #col2iframe').load(function(){
	$("#col1iframe, #col2iframe").contents().find('head').append('<link rel="stylesheet" href="css/iframe-styles.css">');
		$("#col1iframe, #col2iframe").contents().find('a').attr({"target":"_top"});
	$(this).show();
});

$('#col1iframe, #col2iframe').load(function(){
	$(this.contentWindow.document.documentElement).find('head').append('<link rel="stylesheet" href="css/iframe-styles.css">');
	$(this.contentWindow.document.documentElement).find('a').attr({"target":"_top"});
	$(this).show();
});

// this one doesn't work in anything...

$('#col1iframe, #col2iframe').load(function(){
	$(this.document).find('head').append('<link rel="stylesheet" href="css/iframe-styles.css">');
	$(this.document).find('a').attr({"target":"_top"});
	$('#col1iframe, #col2iframe').show();
});

Many thanks

4

Here is what I am working on…

http://staging.theblackhole.co.uk/argos/2011/14410/iframetest/index.html

If you look in IE 6-8 it shows the un-styled page

Here is the location of the script file

http://staging.theblackhole.co.uk/argos/2011/14410/iframetest/js/script.js

Cheers