Indeed, in WebKit you normally see #1 (iframe unloads). We have added the ability to move 'live' iframe, as Adam mentions, potentially across documents, while keeping it completely alive, with XHRs loading, events firing etc (aka 'magic iframe' feature). One would need to use adoptNode() API to do that, something like:<div>
<br></div><div>var iframe = document.getElementById("test");</div><div>other_document.adoptNode(iframe);</div><div>other_document.getElementById("newParent").attachChild(iframe);</div><div><br></div><div>
WebKit has a bug (<a href="https://bugs.webkit.org/show_bug.cgi?id=13574">https://bugs.webkit.org/show_bug.cgi?id=13574</a>) to enable moving iframes w/o reloading. FF has a bug on that as well (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=254144">https://bugzilla.mozilla.org/show_bug.cgi?id=254144</a>) but it's hard to say when exactly those will be fixed. I hope to fix WebKit issue at some point.</div>
<div><br></div><div>While discussing 'magic iframe', Ian Hickson pointed out that nothing in the spec actually mandates discarding the live document inside iframe simply because it's iframe element is connected/disconnected to DOM of the parent document. Here is a note from the HTML5 spec about that: </div>
<div><span class="Apple-style-span" style="font-family: sans-serif, 'Droid Sans Fallback'; font-size: medium; color: rgb(0, 128, 0); font-style: italic; font-weight: bold; line-height: 21px; "><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/infrastructure.html#remove-an-element-from-a-document" title="remove an element from a document" style="color: rgb(0, 0, 204); background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Removing</a> an <code style="font-size: inherit; font-family: monospace, 'Droid Sans Fallback', sans-serif; font-variant: normal; color: rgb(255, 69, 0); "><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-iframe-element" style="color: inherit; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">iframe</a></code> from a <code style="font-size: inherit; font-family: monospace, 'Droid Sans Fallback', sans-serif; font-variant: normal; color: rgb(255, 69, 0); "><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/infrastructure.html#document" style="color: inherit; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Document</a></code> does not cause its <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#browsing-context" style="color: rgb(0, 0, 204); background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">browsing context</a> to be discarded. Indeed, an <code style="font-size: inherit; font-family: monospace, 'Droid Sans Fallback', sans-serif; font-variant: normal; color: rgb(255, 69, 0); "><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-iframe-element" style="color: inherit; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">iframe</a></code>'s <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#browsing-context" style="color: rgb(0, 0, 204); background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">browsing context</a> can survive its original parent <code style="font-size: inherit; font-family: monospace, 'Droid Sans Fallback', sans-serif; font-variant: normal; color: rgb(255, 69, 0); "><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/infrastructure.html#document" style="color: inherit; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Document</a></code> if its <code style="font-size: inherit; font-family: monospace, 'Droid Sans Fallback', sans-serif; font-variant: normal; color: rgb(255, 69, 0); "><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-iframe-element" style="color: inherit; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">iframe</a></code> is moved to another <code style="font-size: inherit; font-family: monospace, 'Droid Sans Fallback', sans-serif; font-variant: normal; color: rgb(255, 69, 0); "><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/infrastructure.html#document" style="color: inherit; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Document</a></code>.</span><br>
<br></div><div>So it seems the right behavior is to keep the content alive. It's not clear why the events would not fire during DOM operations though. Perhaps they should, since nothing is changing from the perspective of the document loaded into iframe - for example, XHR probably should continue loading content if it was doing so before iframe was disconnected from its parent node. Doing some suspension (as for example is done when a page goes into back-forward cache?) would be way more complex mechanism to have, with necessary events on pause/unpause so the live document could re-start async operations correctly.</div>
<div><br></div><div>Dmitry</div><div><br><div class="gmail_quote">On Tue, Aug 24, 2010 at 1:38 PM, Adam Barth <span dir="ltr"><<a href="mailto:w3c@adambarth.com">w3c@adambarth.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">
This seems related to the "magic iframe" concept that was recently<br>
added in WebKit.  Basically, magic iframe lets you move an iframe from<br>
one document to another without blowing away the JavaScript/DOM state<br>
of the iframe.  The way this works is that the iframe remains "alive"<br>
until the browser returns to the main event loop.  If a living iframe<br>
gets added to a document, then it keeps all it's state.  This feature<br>
is useful for sites like Gmail that have chat windows that can be<br>
opened from the main document.  If the user closes the main document,<br>
the chat windows can adopt some iframe that keeps the proper state.<br>
<br>
Adam<br>
<br>
<br>
On Tue, Aug 24, 2010 at 1:30 PM, Ben Lerner <<a href="mailto:blerner@cs.washington.edu">blerner@cs.washington.edu</a>> wrote:<br>
>  There seems to be a bit of disagreement among browsers about how event<br>
> loops and iframes interact when an iframe is removed and then reinserted<br>
> into its parent document.  Consider the following two documents: the parent<br>
> document has a button that removes or reattaches an iframe to the document,<br>
> while the second simply sets an interval to update the page content.<br>
><br>
> Page1.html:<br>
> <!DOCTYPE HTML><br>
> <html><br>
> <body><br>
> <p><button onclick="toggleInDoc();">Show/hide</button></p><br>
> <iframe id="test" src="page2.html"></iframe><br>
> <script><br>
>    var test = document.getElementById("test");<br>
>    function toggleInDoc() {<br>
>      if (test.parentNode == null)<br>
>        document.body.appendChild(test);<br>
>      else<br>
>        document.body.removeChild(test);<br>
>    }<br>
> </script><br>
> </body><br>
> </html><br>
><br>
><br>
> Page2.html:<br>
> <!DOCTYPE HTML><br>
> <html><br>
> <body><br>
> <p id="test"></p><br>
> <script><br>
>    window.setInterval(function() { document.getElementById("test").innerHTML<br>
> += "."; }, 500);<br>
> </script><br>
> </body><br>
> </html><br>
><br>
><br>
> Assume the user waits until the interval has fired several times, then<br>
> presses the button, waits a while, and presses it again.  There are three<br>
> possible outcomes:<br>
> 1. When the iframe is reattached, the inner page reloads.  This seems to go<br>
> beyond the wording of the spec, which says only "When an iframe element is<br>
> first inserted into a document, the user agent must create a nested browsing<br>
> context, and then process the iframe attributes for the first time."  (This<br>
> isn't the first time the iframe is inserted into the document, so we<br>
> shouldn't process the iframe attributes again.)<br>
><br>
> 2. The interval (and presumably, all events) in the iframe is paused while<br>
> it's been detached (since the document is no longer fully active, but it<br>
> also has not been discarded because of the global reference to its container<br>
> element).<br>
><br>
> 3. The interval (and presumably, all events) continues to fire while it's<br>
> been detached, and the content of page2 will have changed while it's been<br>
> detached from page1.<br>
><br>
> So far, Chrome 6, Opera 10.6 and Firefox 3.6 follow #1, and IE 8 follows #3.<br>
>  My reading of the "fully active" clause of the spec leads me to expect #2.<br>
>  Which of these behaviors is the desired one?  And/or, would it be desirable<br>
> to permit authors to specify which behavior they intend?<br>
><br>
> Thanks,<br>
> ~ben<br>
><br>
</blockquote></div><br></div>