Javascript window object

Question

In Javascript, let's say we have a main page (main.html) which contains an <iframe> (iframe.html)

Now inside this iframe.html, if we need to refer to something on the main page (main.html) , can we not just specify window instead of parent.window

If the answer is we need to write parent.window, I wanted to understand is there not a single window object reference for all the iframes within a main page..

While I do understand document is specific to individual iframes, but window should be common to all..Isn't it...Please help me in understanding the concept...

Also is there something window.parent as well ? If yes, how does it differ from parent.window ?

Answer 1

The concept of window is tied to the document: There's one window per document, and one document per window.

That means <iframe> elements, which have their own document, also have their own window, just like a pop-up window or the main navigator window.

So, you'll indeed have to use window.parent to access the container of an <iframe> element, just like you have to use window.opener to access the owner of a pop-up window.

EDIT: Both window.parent and parent.window are valid expressions that return the same object. That's because the window object is the default context in scripting (unqualified names are parsed as members of window), and window objects have a window property that refers to themselves.

So, parent.window is evaluated as window.parent.window, which is the same object as window.parent.

That said, I do prefer using window.parent, to avoid the (minimal) overhead associated with the extra property access.

Answer 2

iframes (and frames) are their own windows, even though in the case of iframes they look like they're part of the main document's window. So yes, to refer to the main document's window, they'd use parent (or window.parent if you want to be verbose, but clear), because they are separate objects. This is partially necessary because a lot of the things in document end up as properties on the containing window.

If you think about it, it makes sense: The purpose of an iframe is to embed independently-sourced content within the page. If the main page and the iframe(s) on it shared a single window object, they'd be sharing global context, and quite possibly conflicting with one another.

Gratuitous live example:

Parent's HTML:

<p>I'm the parent window</p>
<iframe width="500" height="500" src="http://jsbin.com/iyogir"></iframe>

Parent's JavaScript:

function foo() {
  display("<code>foo</code> called!");
}
function display(msg) {
  var p = document.createElement('p');
  p.innerHTML = msg;
  document.body.appendChild(p);
}

Child's HTML:

<p>I'm in the frame</p>
<input type='button' id='theButton' value='Click Me'>

Child's JavaScript:

window.onload = function() {

  document.getElementById('theButton').onclick = function() {
    var p = window.parent;
    if (!p) {
      display("Can't find parent window");
    }
    else if (typeof p.foo !== "function") {
      display("Found parent window, but can't find <code>foo</code> function on it");
    }
    else {
      display("Calling parent window's <code>foo</code> function.");
      p.foo();
    }
  };

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }

};