在前端开发中，我们常常需要使用窗口对象来访问当前窗口、父窗口或顶层窗口。其中包括了 window 对象和其下的 top 和 parent 属性。本文将会介绍这些属性的不同以及它们在实际开发中的应用。
window 对象
首先，我们需要了解 window 对象是指当前窗口或框架的全局对象。每个浏览器窗口、标签页、iframe 中都有自己的 window 对象。
例如，在当前页面中打开一个新的浏览器窗口时，该窗口的 window 对象就是一个全新的、独立的对象。如果在该窗口中打开一个 iframe，则该 iframe 视为一个子窗口，它也有自己的 window 对象。
window.top 属性
window.top 属性返回当前窗口所在的最高层级的窗口对象。通俗来说，它返回浏览器中最上面的那个 window 对象，即整个页面的最外层窗口。
举个例子，假设现在我们的网站嵌套在一个外部网站中（比如微信公众号文章中），这个外部网站有自己的 window 对象。当我们在页面中通过 window.top 访问时，它会返回外部网站的 window 对象。
------------------------ -- ------ ------ --
window.parent 属性
window.parent 属性返回当前窗口的父级窗口对象。通俗来说，它返回包含当前窗口的那个窗口对象。
举个例子，假设我们在一个 iframe 中，而该 iframe 的父窗口是另一个窗口或框架。我们可以使用 window.parent 来访问其父窗口对象。
--------------------------- -- -------------
区别和应用场景
虽然 window.top 和 window.parent 都是窗口对象，但它们之间有一些重要的区别。
window.top总是返回整个页面的最外层窗口对象，即使嵌套了多个框架或 iframe。window.parent则返回包含当前窗口的那个窗口对象。如果当前窗口已经是最外层窗口了，那么window.parent就等同于window.top。
下面是一些实际应用场景：
如果你的页面被嵌套在其他网站中时，你可以使用
window.top来访问最顶层的窗口对象，例如获取最顶层的 URL。在 iframe 中，可以使用
window.parent来与父级窗口进行通信。例如，在 iframe 中打开一个新的页面时，可以使用window.parent.location.href = 'xxxx'来将 URL 设置为父窗口中的对应地址。
总结
在前端开发中，了解窗口对象以及其下的 top 和 parent 属性是非常重要的。它们可以使你轻松地访问其他窗口中的属性和方法，同时也可以用于跨域通信等实际场景中。
最后，我们总结一下本文讲到的内容：
window对象是当前窗口或框架的全局对象。window.top属性返回整个页面的最外层窗口对象。window.parent属性返回包含当前窗口的那个
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/15327