Question

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’t just set my page’s location to that of the iframe because there’s no way to get it to the state I want it in by passing URL parameters.

All references I can find for jumping out of iframes is about the page in the iframe controlling the popping out. I want to pop out the iframe from code which is in the context of the main document.

(My project is actually a Google Chrome user script interacting with a 3rd party site that I have no server control over.)

I’m using jQuery but vanilla JavaScript is also fine of course.

Answer 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 ();