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

iframe s（和frame s）是他们自己的窗口，即使在iframe s的情况下，他们看起来像是主文档窗口的一部分。所以，是的，要引用主文档的窗口，他们会使用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'>

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

};

Answer 2

window的概念与document相关联：每window个document，每document一window。< / p>

这意味着<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，以避免与额外属性访问相关的（最小）开销。

Javascript窗口对象

2 个答案: