4 ms·

Another advantage of using an iframe (besides cross-domain communication) is that you don't have to reset every CSS style you need. When you insert JavaScript

Another advantage of using an iframe (besides cross-domain communication) is that you don't have to reset every CSS style you need. When you insert JavaScript into a page it inherits all the crazy CSS already on the page which can cause all sorts of problems. Iframes have their own context and give you an easy way to avoid that problem.

alanh 15y ago
Yup. Interesting tidbit: HTML5 suggests the `seamless` attribute for <iframe> elements, which would cause those CSS styles to actually affect the contents of the <iframe> (and some other changes, like links affecting the location of the parent window). http://www.w3.org/TR/html5/the-iframe-element.html#the-iframe-element http://www.w3.org/TR/html5/the-iframe-element.html#the-ifram... (Of course, you meant to say “when you insert typical content DOM nodes”, not “insert Javascript”.)
- joshfraser 15y ago
  that is what I meant to say. thanks for clarifying.
brunnsbe 15y ago
An iframe also helps in IE6 (can't directly remember if it's also in IE7) to draw overlays over form elements, otherwise they will be on top.
paulbaumgart 15y ago
Related: if you're only using the iframe for the CSS reset, you can also just document.write its contents, so the client doesn't need to do a separate request and the iframe is on the same origin as its parent frame. Example: https://github.com/cappuccino/cappuccino/blob/master/AppKit/CPWebView.j#L488 https://github.com/cappuccino/cappuccino/blob/master/AppKit/...
colinr 15y ago
Although one major disadvantage I've discovered recently is that if you embed an iframe (with a no-cache response header, i.e. Facebook's like button) it stops Firefox adding the page to the back-forward cache. Same with Webkit if the protocols don't match. https://developer.mozilla.org/en/using_firefox_1.5_caching https://developer.mozilla.org/en/using_firefox_1.5_caching I wonder how much extra bandwidth Facebook has wasted worldwide by doing this? Twitter allows caching for 30 mins at least, good enough for back/forward caching to be useful.

alanh 15y ago

Yup. Interesting tidbit: HTML5 suggests the `seamless` attribute for <iframe> elements, which would cause those CSS styles to actually affect the contents of the <iframe> (and some other changes, like links affecting the location of the parent window). http://www.w3.org/TR/html5/the-iframe-element.html#the-iframe-element http://www.w3.org/TR/html5/the-iframe-element.html#the-ifram... (Of course, you meant to say “when you insert typical content DOM nodes”, not “insert Javascript”.)

joshfraser 15y ago
that is what I meant to say. thanks for clarifying.

brunnsbe 15y ago

An iframe also helps in IE6 (can't directly remember if it's also in IE7) to draw overlays over form elements, otherwise they will be on top.

paulbaumgart 15y ago

Related: if you're only using the iframe for the CSS reset, you can also just document.write its contents, so the client doesn't need to do a separate request and the iframe is on the same origin as its parent frame. Example: https://github.com/cappuccino/cappuccino/blob/master/AppKit/CPWebView.j#L488 https://github.com/cappuccino/cappuccino/blob/master/AppKit/...

colinr 15y ago

Although one major disadvantage I've discovered recently is that if you embed an iframe (with a no-cache response header, i.e. Facebook's like button) it stops Firefox adding the page to the back-forward cache. Same with Webkit if the protocols don't match. https://developer.mozilla.org/en/using_firefox_1.5_caching https://developer.mozilla.org/en/using_firefox_1.5_caching I wonder how much extra bandwidth Facebook has wasted worldwide by doing this? Twitter allows caching for 30 mins at least, good enough for back/forward caching to be useful.