[thelist] Applying stylesheets to IFRAMEs

Sat Apr 28 19:39:51 CDT 2007

Brent Eades wrote:
> 1. Is there a reliable away of 'forcing' CSS on content contained
> in an iframe?
> 
> 2. Better still, is there an alternative to <iframe> that I'm not 
> thinking of? The main advantage of <iframe> is that it can be the
> target for the output of forms, which I don't believe an <object>
> can be... but maybe I'm forgetting something here, an approach
> better than <iframe>?

Brent,

Iframes don't use the parent's CSS because they are essentially a new window
with a new document.  To force the CSS onto it, you'll either need to
include the stylesheet in your results page, or use a JavaScript solution to
add the stylesheet to the resulting page from the parent.

As for your second question, what you *could* do is post/get the forms using
an XMLHttpRequest, and then drop the responseText into the innerHTML of a
<div> (assuming the returned HTML structure doesn't contain a full document,
with <head> and <body> declarations).  I'd probably leave the <iframe> in my
sourcecode, and have the forms targetg that, then unobtrusively replace the
<iframe> with the <div> and change the form actions if the browser supports
using XMLHttpRequest.  This has the extra benefit of having your document's
CSS applied to the result, as well.

A non-XHR method would be what Peter suggested.  Hide the <iframe>, but
leave it in the document.  Post the forms to it, grab the result and drop it
into a <div>.

HTH,
Rick.