Javascript 窗口对象

Question

在 Javascript 中，假设我们有一个包含 main.html 的主页 ( <iframe>) ( iframe.html )

现在在这个iframe.html里面, 如果我们需要引用主页上的内容 ( main.html ), 我们不能只指定 window而不是 parent.window

如果答案是我们需要写parent.window ，我想知道是否没有一个 window主页中所有 iframe 的对象引用..

虽然我明白document特定于单个 iframe，但 window应该对所有人都是通用的..不是吗...请帮助我理解这个概念...

还有什么东西window.parent以及？如果是，它与 parent.window 有何不同？ ？

Answer 1

iframe(和 frame)是它们自己的窗口，即使在 iframe 的情况下它们看起来像是主文档窗口的一部分。所以是的，要引用主文档的窗口，他们会使用 parent(或者 window.parent 如果你想冗长但清晰)，因为它们是分开的对象。这在一定程度上是必要的，因为 document 中的很多内容最终都作为包含 window 的属性。

如果您考虑一下，它是有道理的:iframe 的目的是在页面中嵌入独立来源的内容。如果主页和其上的 iframe(s) 共享一个 window 对象，它们将共享全局上下文，并且很可能相互冲突。

免费 live example :

parent 的 HTML:

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

父级的 JavaScript:

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

child 的 HTML:

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

child 的 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);
  }

};