Published on

Adding a stylesheet to an iframe

Authors
  • avatar
    Name
    Mike Barram
    Twitter

If your page contains an iframe and you need to dynamically add a stylesheet, you can do it like this:

var $head = $(“#myIframe”).contents().find(“head”);  
$head.append($(<link/>, { rel: “stylesheet”, href: window.location.protocol +//” + window.location.host + “/mystyles/mystylesheet.css”, type: “text/css” }));

Even if the domain for the stylesheet is the same as the parent page and the iframe, you still need to include the host address of the stylesheet (the protocol and host bit) or IE will ignore it.

from
http://stackoverflow.com/questions/6960406/add-css-to-iframe
and http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/