How to Have Content from an Iframe Overflow Onto the Parent Frame

Is there a way to have content from an IFRAME overflow onto the parent frame?

No it's not possible. Ignoring any historical reasons, nowadays it would be considered a security vulnerability -- eg. many sites put untrusted content into iframes (the iframe source being a different origin so cannot modify the parent frame, per the same origin policy).

If such untrusted content had a mechanism to place content outside of the bounds of the iframe it could (for example) place an "identical" login div (or whatever) over a parent frame's real login fields, and could thus steal username/password information. Which would suck.

make an element overflow out of an iframe

You can't.

An <iframe> is an element containing a separate, distinct browser window (essentially).

Think of it literally like a window: when you look out of your window, the view of the outside stops at the windowframe.

This is in contrast to content inside, say, a scrollable <div>, which is more like a hand-held sheet of glass with some stuff painted on it and some other stuff stuck on with sellotape and hanging off over the edges.

pass a javascript variable from an iframe to the parent frame

If the pages are both on the same domain, you could call a function of the parent window:

window.parent.zipPhoneCallback(zipphone);

In the parent window, you could define a function like this:

function zipPhoneCallback(zipphone) {
    ((console&&console.log)||alert)("zipphone = " + zipphone);
}

Access elements of parent window from iframe

I think the problem may be that you are not finding your element because of the "#" in your call to get it:

window.parent.document.getElementById('#target'); 

You only need the # if you are using jquery. Here it should be:

window.parent.document.getElementById('target'); 

How to communicate between iframe and the parent site?

With different domains, it is not possible to call methods or access the iframe's content document directly.

You have to use cross-document messaging.

parent -> iframe

For example in the top window:

myIframe.contentWindow.postMessage('hello', '*');

and in the iframe:

window.onmessage = function(e) {
    if (e.data == 'hello') {
        alert('It works!');
    }
};

iframe -> parent

For example in the top window:

window.onmessage = function(e) {
    if (e.data == 'hello') {
        alert('It works!');
    }
};

and in the iframe:

window.top.postMessage('hello', '*')

---

Related Topics