window.opener / window.parent / window.top 是什么?

109
在JavaScript中,window.openerwindow.parentwindow.top是什么,我应该在什么情况下使用它们?

4
还有一个 window.self,它指的是同一个窗口 :) - abhimanyuaryan
4个回答

181
  • window.opener指的是调用window.open( ... )打开当前窗口的那个窗口。
  • window.parent指的是在<frame><iframe>中当前窗口的父级窗口。
  • window.top指的是嵌套在一层或多层<iframe>子窗口中从最顶层窗口开始的那个窗口。

当它们与引用窗口的情况不相关时,它们将为null(或者也可能是undefined)。 (“引用窗口”是指JavaScript代码在其上下文中运行的窗口。)


2
感谢@pointy的回复。我有一个主页面,当页面提交时,它会使用window.open()打开一个子页面。现在这个子窗口再次使用相同的window.open()打开另一个子窗口,并关闭自身。现在,当我提交我的第二个子窗口(第一个子窗口已不存在),我想从第二个子窗口访问我的主页面元素。当第一个子窗口不存在时,这是否可能? - Sriram
4
这是你需要在问题中提供的那种信息,这样人们才知道你真正要解决的问题是什么。 - josh3736
5
@Sriram,在中间页面消失之前,你需要获取window.opener.opener - Pointy

27

关于这些事物的基本信息可以在MDN上找到:

window.opener

我通常在打开充当对话框并需要用户输入且需要向主窗口返回信息的新窗口时使用 window.opener,但这受到源策略的限制,因此您需要确保对话框和打开器窗口的内容都来自相同的源。

window.parent

我主要在处理需要与包含它们的窗口对象通信的 <iframe> 时使用它。

window.top

这对于确保您正在与顶层浏览器窗口进行交互非常有用。您可以使用它来防止其他网站在iframe中嵌入您的网站,以及其他一些事情。


你有几种方法可以处理你的情况。
你有以下结构:

  • 主窗口
  • 对话框1
    • 由对话框1打开的对话框2

当对话框1运行打开对话框2的代码时,在创建对话框2后,让对话框1在对话框2上设置一个属性,该属性引用了Dialog1的打开者。

因此,如果“childwindow”是对话框2窗口对象的变量,“window”是对话框1窗口对象的变量。在打开对话框2之后,但在关闭对话框1之前,进行类似于以下的赋值:

childwindow.appMainWindow = window.opener

完成上述赋值后,关闭对话框1。 然后从对话框2内运行的代码中,您应该能够使用window.appMainWindow来引用主窗口的window对象。


感谢@Mark的回复。我有一个主页面,在页面提交后使用window.open()打开一个子页面。现在这个子窗口再次使用相同的window.open()打开另一个子窗口,并关闭自身。现在,当我提交我的第二个子窗口(第一个子窗口已不存在),我想从第二个子窗口访问我的主页面元素。当第一个子窗口不存在时,这是否可能? - Sriram
更新的答案。@josh3736 - 我不认为那个评论有任何帮助。我没有建议任何人去获得w3schools的认证。这里的每个人都知道如何使用谷歌并获取window.opener、window.top和window.parent的基本定义。使用上面的链接或找到新的参考资料,但在这里重复定义这些属性的信息几乎没有任何意义。 - Mark At Ramp51
解释非常有帮助 @MarkAtRamp51 谢谢! - Sriram
3
这个链接详细解释了w3schools存在的问题。关键是要避免推广或链接到w3schools(从而提高Google PageRank),将其作为权威信息来源。W3S传播错误信息,问题的一部分在于很多人链接到这些错误信息。更好的做法是链接到更可靠的信息源,比如MDN - josh3736

7

top、parent、opener(以及window、self和iframe)都是窗口对象。

  1. window.opener -> 返回打开或启动当前弹出窗口的窗口。
  2. window.top -> 返回最顶层的窗口,如果您正在使用 frames,则为 frameset 窗口;如果不使用 frames,则与 window 或 self 相同。
  3. window.parent -> 返回当前框架或 iframe 的父框架。父框架可以是 frameset 窗口或嵌套框架中的另一个框架。如果不使用 frames,则 parent 与当前窗口或 self 相同。

1
当你处理弹出窗口时,window.opener扮演着重要的角色,因为我们需要处理父页面和子页面的字段。当我们需要使用父页面上的值时,可以使用window.opener,或者在加载子窗口或弹出窗口时需要一些数据时,我们可以再次使用window.opener设置这些值。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接