Javascript 窗口对象

Posted 2023-03-05

【中文标题】Javascript 窗口对象

【英文标题】：Javascript window object

【发布时间】：2011-10-04 11:56:18

【问题描述】：

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

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

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

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

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

【参考方案1】：

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

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

无偿live example:

父母的 HTML：

<p>I'm the parent window</p>
<iframe   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);
  

;

【参考方案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，以避免与额外的属性访问相关的（最小）开销。

【讨论】：

是否必须使用 window.parent 才能访问容器或 parent.window 或两者都有效？

@hmthr 我推荐window.window.parent.window.window...:)

@hmthr：在浏览器的 JavaScript 中，window 对象是所有全局变量的容器。事实上，window 符号本身就是窗口对象的一个​​属性（指回对象）。 parent也是window对象的一个​​属性，所以window.parent是多余的，你可以直接说parent。但是，它有助于清楚自己在做什么。 parent.window 也可以，但会产生误导：parent 部分为您提供了父窗口的窗口对象，无需进一步说明；然后你正在查找它上面的 window 属性（它引用它）。

@Sime：我想你在某处忘记了self ;)

There's one window per document, and one document per window。如果你是对的，那么window.history 是什么？正如 W3C 所说，window 对象是许多文档的包装器，其中第一个是 about:blank 文档，它将在创建时与窗口对象相关联。这就是browsing context的概念。