Add CSS to iFrame [duplicate]

Question

Possible Duplicate:
How to apply CSS to iFrame?

Right now I'm loading an iframe via jquery:

 $(window).load(function(){
  $('iframe').load(function() {
      $('iframe').show()
      $('#loading').hide();

    });
    $('#loading').show();
    $('iframe').attr( "src", "http://www.url.com/");

  });

And I have a custom style sheet that I would like to apply to that page. The page within the iframe is not on the same domain, which is why it's tricky. I've found solutions that allow you to add individual tags, but not entire stylesheets.

EDIT: The page in question is loaded via file:// in Mobile Safari so the Cross-domain policy does not apply.

How the hell did you do that? It should be not allowed because of the cross domain policy of the browsers. — KARASZI István
– KARASZI István, Commented Aug 5, 2011 at 17:42
@KARASZI on the contrary, that's exactly what iframes are for. — rockerest
– rockerest, Commented Aug 5, 2011 at 17:45
@Jacek, stackoverflow.com/questions/217776/how-to-apply-css-to-iframe/… — Peter Kazazes
– Peter Kazazes, Commented Aug 5, 2011 at 17:46
I'm not understanding why you can't load a stylesheet from the iframe. I did this for a client once the same way you did. I had an ajax window load on the fly and i grabbed the data from serverside and I just embeded the stylesheet into the iframe dynamically. — pqsk
– pqsk, Commented Aug 5, 2011 at 17:48

Community · Accepted Answer · 2017-05-23 12:25:51Z

64

Based on solution You've already found How to apply CSS to iframe?:

var cssLink = document.createElement("link") 
cssLink.href = "file://path/to/style.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['iframe'].document.body.appendChild(cssLink);

or more jqueryish (from Append a stylesheet to an iframe with jQuery):

var $head = $("iframe").contents().find("head");                
$head.append($("<link/>", 
    { rel: "stylesheet", href: "file://path/to/style.css", type: "text/css" }));

as for security issues: Disabling same-origin policy in Safari