Add CSS to iFrame

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.

Solution

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

Comments

[Vivian River]

This ought to give security minded people headaches

[Peter Kazazes]

Getting an error with the non-JQ way and no result with the JQ way. Error is Cannot read property "document" of undefined.

[Jacek Kaniuk]

Then Cross-domain policy does apply after all

[Peter Kazazes]

@Jacek ahh is that the CDP kicking in? Figured it'd give me a more specific error...

[Jacek Kaniuk]

Try that stackoverflow.com/questions/4556429/…

[ᴍᴀᴛᴛ ʙᴀᴋᴇʀ]

Any way to stop the flicker whilst the stylesheet is applied?

[Frederico Schardong]

Does that work on IE8? I am trying to inject a CSS file but IE8 is not processing it. It works on IE11 using the compatibility mode, though.