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

iframes(和frames)是他们自己的窗口,即使在iframes 的情况下,他们看起来像是主文档窗口的一部分.所以,是的,要引用主文档的窗口,他们会使用parent(或者window.parent如果你想要冗长,但要清楚),因为它们是单独的对象.这是部分必要的,因为很多东西document最终都作为包含的属性window.

如果你仔细想想,那就有意义了:a的目的iframe是在页面中嵌入独立的内容.如果主页面和它上面的iframe(s)共享一个window对象,它们将共享全局上下文,并且很可能彼此冲突.

无偿的现场例子:

家长的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:window每个document,document每个一个window.

这意味着<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,以避免与额外属性访问相关的(最小)开销.