0

Im working with an external iframe that I want to style using my own css. The iframe is loaded and created by a javascript witch itself is loaded by another javascript. Since this is a service provided by a company i have no control over what their javascript produces or the iframe content.

What I have done so far using jquery is to load all of my custom css files into the iframe using window-onload like this: 

window.onload = function() {
 $('iframe').addClass('styledIframe');

    var $c = $('.styledIframe').contents();
    //clone all styles from this document into the iframe
    $c.find('head').append($('style, link[rel=stylesheet]').clone());
}

The iframe changes the ID everytime its loaded so that why i added the class "styledIframe". To my problem: this works perfect in all browsers exept Internet explorer, i tried it out in IE9 and lower and it doesn't work in any of them.

What can I do to make this work in IE?

Luther Blissett
  • 238
  • 1
  • 10
user2144046
  • 1
  • 2

1 Answers1

0

You can not style elements from an iFrame as technically they don't exist on the page but exist on another server. You can however style if the iFrame comes from the same server - its a security issue. 3rd party nightmares I know but that's the way it is. You can only ask them to install your style on their server or ask them to change the styling of the content themselves to suit you.

Jamie Paterson
  • 426
  • 3
  • 10