How to access parent Iframe from JavaScript

javascript iframe

Well, I have an IFrame, which calls a same domain page. My problem is that I want to access some information from this parent Iframe from this called page (from JavaScript). How can I access this Iframe?

Details: There are several Iframes just like this one, that can have the same page loaded, because I am programming a Windows environment. I intend to close this Iframe, that's why I need to know which I should close from inside him. I have an array keeping references to these Iframes.

EDIT: There iframes are generated dynamically

even if iframes are generated dynamically, you can assign a new unique id by using some sort of counter, finally you dont need to know ID, but you can search easily, see my answer.

Aquatic

Also you can set name and ID to equal values

<iframe id="frame1" name="frame1" src="any.html"></iframe>

so you will be able to use next code inside child page

parent.document.getElementById(window.name);

Maybe it is not obvious for everyone, but with this method you can access a library object of the parent (only if the parent has already loaded the library). Example: access jQuery with parent.$('#something')

This solution is compatible with IE5+ compatibility quirks mode.

Even in 2016, this works great as part of a solution for the problem of IE printing the contents of an iframe too small. But why does it work? window.name returns a string. What's different about using window.name than just passing the id name as a string which doesn't work.)?

Hi, it doesn't run with Chrome 59.. :VM111:1 Uncaught DOMException: Blocked a frame with origin "xxx" from accessing a cross-origin frame.

Chrome see files in same folder as cross-origin if not CORS is set. They say it is for security. Setting CORS need a server. Give users a message to set up a server or change browser if Chrome is detected.

Rob W

Simply call window.frameElement from your framed page. If the page is not in a frame then frameElement will be null.

The other way (getting the window element inside a frame is less trivial) but for sake of completeness:

/**
 * @param f, iframe or frame element
 * @return Window object inside the given frame
 * @effect will append f to document.body if f not yet part of the DOM
 * @see Window.frameElement
 * @usage myFrame.document = getFramedWindow(myFrame).document;
 */
function getFramedWindow(f)
{
    if(f.parentNode == null)
        f = document.body.appendChild(f);
    var w = (f.contentWindow || f.contentDocument);
    if(w && w.nodeType && w.nodeType==9)
        w = (w.defaultView || w.parentWindow);
    return w;
}

Thanks! Works on IE 6+, FF and Chrome!

window.frameElement returns null when window and iframe have different domains, i.e. cross-origin messaging.

@Qwerty have you found any solution?

@AjayPatidar I think I gave up. :(

@Qwerty One possible solution is to use an iframe as a "proxy" to send messages between pages on different domains. sysend.js does this using postMessage(), for example.

Kenneth Lynne

I would recommend using the postMessage API.

In your iframe, call:

window.parent.postMessage({message: 'Hello world'}, 'http://localhost/');

In the page you're including the iframe you can listen for events like this:

window.addEventListener('message', function(event) {
      if(event.origin === 'http://localhost/')
      {
        alert('Received message: ' + event.data.message);
      }
      else
      {
        alert('Origin not allowed!');
      }

    }, false);

By the way, it is also possible to do calls to other windows, and not only iframes.

Read more about the postMessage API on John Resigs blog here

I think this is clearly the best answer, the <iframe> contents doesn't have to know anything about the parent and vice versa. They only have to obey the simple message contract. Awesome!

The