Javascript 窗口对象

Question

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

现在在这个iframe.html里面，如果我们需要参考主页上的东西（main.html） ，我们能不能只指定window 而不是parent.window

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

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

还有window.parent 的东西吗？如果是，它与parent.window 有何不同？

Answer 1

iframes（和frames）是它们自己的窗口，尽管在iframes 的情况下它们看起来像是主文档窗口的一部分。所以是的，要引用主文档的窗口，他们会使用parent（或window.parent，如果你想要详细但清晰），因为它们是单独的对象。这部分是必要的，因为document 中的很多东西最终都作为包含window 的属性。

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

无偿live example:

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

孩子的 HTML：

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

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

};

Answer 2

window 的概念与document 相关：每个document 有一个window，每个window 有一个document。

这意味着<iframe> 元素有自己的document，也有自己的window，就像弹出窗口或主导航窗口一样。

因此，您确实必须使用window.parent 来访问<iframe> 元素的容器，就像您必须使用window.opener 来访问弹出窗口的所有者一样。

编辑： window.parent 和 parent.window 都是返回相同对象的有效表达式。这是因为window 对象是脚本中的默认上下文（非限定名称被解析为window 的成员），而window 对象具有引用自身的window 属性。

因此，parent.window 被评估为 window.parent.window，它与 window.parent 是同一个对象。

也就是说，我更喜欢使用window.parent，以避免与额外的属性访问相关的（最小）开销。