Applying styles to the content in an iframe

Question

The page inside iframe is loaded dynamically by javascript.

I use jQuery, so I tried like this.

var css2 = '<link rel="stylesheet" href="/inc/css/style.css" type="text/css"/>';
$("iframe").contents().find("head").append(css2);

This works fine with firefox, but not with IE.

Then I created dom and append it to the head tag manually with 'createElement', 'setAttribute'. It still does not work with IE.

I think there is a security issue in controlling iframe dynamically. Is there a way to make it work with IE?

Answer 1

try this (untested):

var id = '#myIframeId'
var iframe = document.frames ? document.frames[id] : document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;


$(ifWin).find('head').append(css2);