ansaurus

Question

Append a stylesheet to an iframe with jQuery

Answer 1

+2 A:

Whilst you can interact with an iframe's document.styleSheets, the old-school reliable way is either to have the stylesheet there in the first place (by writing an iframe-src to point to an empty document with the desired stylesheet), or put it in place with document.write(). For example:

<body>
    <iframe></iframe>
    <script type="text/javascript">

        var d= frames[0].document;
        d.open();
        d.write(
            '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;'+
            '<html><head><style type="text/css">'+
            'body { font-size: 200%; }'+
            '<\/style><\/head><body><\/body><\/html>'
        );
        d.close();

        d.body.innerHTML= '<em>Hello</em>';
    </script>
</body>

(This will also set the iframe document to Standards Mode, assuming that's what you want.)

bobince 2009-03-09 04:42:52

I went the route with basic page with the stylesheet included in the <head>. $(document).ready(function(){ SetPreview(); }); does not set the iframe body in Chrome, Safari, or FireFox, but it works in IE...

hunter 2009-03-09 14:28:43

just some background, I'm setting the Preview on page load and then on each keyup in the TextArea

hunter 2009-03-09 15:09:47

jQuery's document.ready only requires the main document to be loaded, it doesn't have to wait for the iframe content to load. So it can be a race condition to see whether the iframe document's <body> loads before ‘ready’, and hence whether document.body is available yet.

bobince 2009-03-09 15:10:07

(Which is why the otherwise quite ugly document.write() approach is often used.)

bobince 2009-03-09 15:10:46

I will give that a shot. Is there a way to ensure that the iframe is finished loading from the containing document? IE7 worked as expected, which was a shock. That actually makes me think that it should not have worked.

hunter 2009-03-09 16:57:50

The plain old ‘document.onload’ event waits for iframes (and images) to be loaded. Because this is usually not what's wanted, jQuery tries to bind on the ‘DOMContentLoaded’ event instead. But IE doesn't support this event, so on that browser jQuery falls back to the slower, later ‘onload’ option.

bobince 2009-03-09 17:52:56

(Actually ‘onreadystatechange’, but it's effectively the same thing.)

bobince 2009-03-09 17:53:46

writing to the document worked great! I also make it only do the d.write the 1st time and each request after only sets the HTML. Thanks!

hunter 2009-03-10 13:05:08

Answer 2

A:

Pulled this code below from jHtmlArea source. Funny thing is, the feature was there and I didn't realize it. I came across this SO Question when I was trying to figure out how to implement it. :)

This isn't really "jQuery" but it works. I'm guesing something with append isn't working with iframe so they did it old school. Bobince's answer looks good too, and might be more reliable? So far, this seems to work ok.

var e = edit.createElement('link'); 
e.rel = 'stylesheet'; 
e.type = 'text/css'; 
e.href = options.css; 
this.iframe[0].contentWindow.document.getElementsByTagName('head')[0].appendChild(e);

EDIT: I think the reason this works is if it is sameDomain (including creating iframe in js) Otherwise the usual browser security blocks will prevent you from manipulating iframe dom.

See How to apply CSS to iFrame

Jason 2010-01-07 16:33:34

where were you last year?

hunter 2010-01-28 21:30:40

ansaurus

tags:

views:

answers:

Append a stylesheet to an iframe with jQuery

related questions