window.parent与window.openner区别介绍

window.parent与window.opener区别介绍

在网页中经常出现需要进行页面跳转的情况，比如新窗口打开链接，或者在iframe中嵌入其他网页。在JavaScript中有两个常用的属性可用于控制页面跳转：window.parent和window.opener。在本文中，将详细介绍这两个属性的区别以及其应用场景。

window.parent

window.parent是一个指向当前页面的父页面的指针，它通常用在iframe中嵌入其他页面的场景中。通过window.parent属性，子页面可以访问父页面的一些属性和方法，进而进行与父页面的通信或者操作。

// iframe子页面中获取父页面中的DOM元素
const parentElement = window.parent.document.getElementById('parent-element-id');

window.opener

window.opener是一个指向打开当前页面的那个窗口的指针，它通常用在打开新窗口的场景中。通过window.opener属性，新窗口可以访问打开它的窗口的一些属性和方法，进而实现跨窗口的通信或者操作。

例如，我们在打开一个新窗口的同时向它传递数据，可以通过如下方式：

在父窗口中的JavaScript代码：

function openChildWindow() {
  const childWindow = window.open('child.html', 'childWindow');
  childWindow.foo = 'bar';
}

在子窗口中的JavaScript代码：

const parentWindow = window.opener;
console.log(parentWindow.foo); // 输出"bar"

区别介绍

简单来说，window.parent是一个指向当前窗口的父级窗口的指针，而window.opener是一个指向打开当前窗口的父级窗口的指针。

具体来说，它们的区别如下：

• window.parent可用于访问嵌套iframe中的父级窗口，而window.opener只能用于访问打开当前窗口的那个窗口；
• window.parent属性是只读的，而window.opener属性是可读写的；
• 当前窗口在未被打开的状态下，window.parent会返回当前窗口自身，而window.opener会返回null。

示例说明

示例1：通过window.parent实现跨iframe访问

父窗口HTML代码：

<iframe src="child.html" id="child-iframe"></iframe>

子窗口HTML代码：

<div id="message"></div>

父窗口JavaScript代码：

const childIframe = document.getElementById('child-iframe');
const messageElement = childIframe.contentWindow.document.getElementById('message');
messageElement.innerText = 'Hello World!';

在父窗口中，我们首先通过document.getElementById('child-iframe')获取到子窗口的iframe元素，然后通过contentWindow属性获取到子窗口的全局window对象，进而通过document.getElementById('message')找到子窗口中的消息元素，最后实现了跨iframe访问。

示例2：通过window.opener实现从子窗口向父窗口传递数据

父窗口HTML代码：

<button onclick="openChildWindow()">打开子窗口</button>

子窗口HTML代码：

无

父窗口JavaScript代码：

function openChildWindow() {
  const childWindow = window.open('child.html', 'childWindow');
  childWindow.foo = 'bar';
}

在父窗口中，我们通过window.open方法打开了一个子窗口，并且通过childWindow.foo = 'bar'传递了一个数据。在子窗口中，通过window.opener获取到父窗口的window对象，进而访问到在父窗口中传递过来的数据。