使用window.opener / window.parent / window.top

在前端开发中，我们可能会需要通过 JavaScript 代码来访问父级页面或者打开一个新窗口。为了实现这些功能，我们可以使用 window.opener、window.parent 或者 window.top。

window.opener

当在一个页面中通过 JavaScript 打开一个新窗口时，新打开的页面将会包含一个指向原始页面的 window.opener 对象。通过 window.opener，我们可以访问原始页面的 DOM 对象和执行一些操作。

// 在原始页面中打开一个新窗口
const newWindow = window.open('https://www.example.com');

// 在新窗口中通过 window.opener 访问原始页面的 DOM 对象并修改它们
newWindow.opener.document.querySelector('#title').textContent = 'New Title';

需要注意的是，由于安全限制，如果新窗口的域名与原始页面的域名不同，访问 window.opener 将会被禁止。

window.parent

当在一个 iframe 中嵌入一个网页时，iframe 内部页面的 JavaScript 可以通过 window.parent 对象来访问 iframe 的父级页面。

<!-- 父级页面 -->
<iframe src="child.html"></iframe>

<!-- 子级页面 child.html -->
<script>
  // 在子级页面中通过 window.parent 访问父级页面的 DOM 对象并修改它们
  window.parent.document.querySelector('#title').textContent = 'New Title';
</script>

需要注意的是，由于安全限制，如果 iframe 内部页面与父级页面的域名不同，访问 window.parent 将会被禁止。

window.top

当我们需要在一个嵌套的 iframe 中访问最顶层的页面时，可以使用 window.top 对象。这个对象指向整个浏览器窗口或者 frame 的最外层。

<!-- 父级页面 -->
<iframe src="child.html"></iframe>

<!-- 子级页面 child.html -->
<script>
  // 在子级页面中通过 window.top 访问最顶层的页面的 DOM 对象并修改它们
  window.top.document.querySelector('#title').textContent = 'New Title';
</script>

需要注意的是，由于安全限制，如果 iframe 内部页面与最顶层页面的域名不同，访问 window.top 将会被禁止。

总结

使用 window.opener、window.parent 和 window.top 可以帮助我们在前端开发中方便地访问其他页面的 DOM 对象和执行一些操作。需要注意的是，由于安全限制，访问这些对象可能会被禁止，特别是当涉及到跨域操作时。

以上就是本文对 window.opener、window.parent 和 window.top 的详细解释和示例代码，希望对读者有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13283