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.

How the hell did you do that? It should be not allowed because of the cross domain policy of the browsers. — KARASZI István, Aug 05 '11 at 17:42
@KARASZI on the contrary, that's exactly what `iframe`s are for. — rockerest, Aug 05 '11 at 17:45
@Jacek, http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe/217833#217833 — Peter Kazazes, Aug 05 '11 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, Aug 05 '11 at 17:48
@pqsk, I can load the stylesheet that's already on the page, attaching **my** custom sheet is the issue. — Peter Kazazes, Aug 05 '11 at 17:49
@Peter, so you found your own answer? That link provides all the details you would need. — rockerest, Aug 05 '11 at 17:50
@Karaszi the issue is that I'm loading it in mobile Safari via file:// in phonegap... there is no domain to begin with! — Peter Kazazes, Aug 05 '11 at 17:50
Do you use firebug or something of the sort to see what's going on when the iframe loads? that helps me a lot in debugging. Maybe if you could see what's going on put a screen shot, or tell us what you have tried/are trying. — pqsk, Aug 05 '11 at 17:58

score 61 · Accepted Answer · edited May 23 '17 at 12:25

61

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

edited May 23 '17 at 12:25

Community

1
1

answered Aug 05 '11 at 17:59

Jacek Kaniuk

5,063
23
28

6

This ought to give security minded people headaches – Vivian River Aug 05 '11 at 18:04
Getting an error with the non-JQ way and no result with the JQ way. Error is `Cannot read property "document" of undefined.` – Peter Kazazes Aug 05 '11 at 18:10
4

Then Cross-domain policy does apply after all – Jacek Kaniuk Aug 05 '11 at 18:12
@Jacek ahh is that the CDP kicking in? Figured it'd give me a more specific error... – Peter Kazazes Aug 05 '11 at 18:14
1

Try that http://stackoverflow.com/questions/4556429/disabling-same-origin-policy-in-safari – Jacek Kaniuk Aug 05 '11 at 18:16
Any way to stop the flicker whilst the stylesheet is applied? – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Feb 26 '15 at 14:57
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. – Frederico Schardong May 07 '15 at 20:14

Add CSS to iFrame

1 Answers1

Linked

Related