How To "pop Out" An Iframe Within My Document?

I am loading a page from the same domain into an iframe on my page. After interacting with a JavaScript-driven form in the iframe I then want it to take over entire document. I can

Solution 1:

You can't truly "pop out" of the iframe by the normal method (location.href = "..."), because you will lose your form and JS state.

Likewise, code like:

document.head=frames[0].document.head;document.body=frames[0].document.body;

Would appear to work but would not preserve the JS state.

It may be possible to iterate over the frame's contents and copy structure and values to the current page, but this seems like a fool's errand to me.

I recommend that you just make it look like the frame has taken over. You can do that with code like this:

var usurpingFrame = $("YOUR FRAME SELECTOR");
usurpingFrame.css ( {
    position:   "fixed",
    top:        "0",
    left:       "0",
    "z-index":  "8888",
    margin:     "0",
    height:     "100%",
    border:     "none"
} );
usurpingFrame.width ($(window).width() );
$("*").not (usurpingFrame).not (usurpingFrame.parents() ).hide ();