Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add CSS to iFrame [duplicate]

Tags:

jquery

css

iframe

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.

like image 380
Peter Kazazes Avatar asked Aug 05 '11 17:08

Peter Kazazes


People also ask

Can I add CSS to iframe?

Adding CSS File to iFrameYou can add entire CSS file instead of injecting separated styles by creating link and add it to the iframe's head. This method does not work with cross domain content. You'll need to set appropriate CORS header but it's not recommended due to security risks.

Can iframe use parent CSS?

You can not directly apply styles to the inner IFrame element through parent window CSS class even though its domain is same as parent. As ,(All the iframe's domain is the same as the parent) .. Best thing you can do is ,to add your main style sheet to the IFrame using javascript or jquery.

Can you style an iframe?

Styling the contents of an iframe is just like styling any other web page. But, you must have access to edit the page. If you can't edit the page (for example, it's on another site).


1 Answers

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

like image 185
Jacek Kaniuk Avatar answered Oct 09 '22 01:10

Jacek Kaniuk