js中opener与parent的区别详细解析

在JavaScript中，特别是在与窗口（window）对象或浏览器环境交互的上下文中，并没有直接名为`opener`和`parent`的内置全局变量或函数，它们通常是在处理窗口（window）对象时遇到的属性，用于指代特定的窗口或框架。下面是对这两个属性的详细解析：

### opener

`opener`属性是一个只读的属性，它引用打开了当前窗口的那个窗口对象。这个属性特别有用在弹出窗口（popup window）的场景中，允许弹出窗口与打开它的父窗口（或称为“opener”窗口）进行交互。

**示例**：

假设有一个HTML页面（我们称之为页面A），它有一个按钮，点击这个按钮会打开一个新的窗口（页面B）。在页面B中，你可以使用`window.opener`来引用页面A的`window`对象，从而能够访问页面A的属性和方法，或者与页面A进行通信。

// 页面A的JavaScript代码
function openPopup() {
    window.open('pageB.html', '_blank');
}

// 页面B的JavaScript代码
function communicateWithOpener() {
    if (window.opener && !window.opener.closed) {
        // 这里可以调用页面A的函数或访问其属性
        window.opener.someFunctionOnPageA();
    }
}

### parent

`parent`属性也是一个只读的属性，但它用于引用包含当前窗口的父窗口。这在iframe或frame的上下文中特别有用，允许子窗口（即iframe或frame中的窗口）访问其父窗口的属性或方法。

**示例**：

假设有一个HTML页面（页面C），它包含一个iframe，iframe加载了另一个页面（页面D）。在页面D中，你可以使用`window.parent`来引用页面C的`window`对象。

<!-- 页面C的HTML代码 -->
<iframe src="pageD.html"></iframe>

<!-- 页面D的JavaScript代码 -->
function accessParentPage() {
    // 访问页面C的某个函数或属性
    window.parent.someFunctionOnPageC();
}

### 总结

- `opener`用于引用打开当前窗口的窗口对象，特别适用于弹出窗口与打开它的窗口之间的通信。

- `parent`用于引用包含当前窗口的父窗口对象，在iframe或frame的上下文中特别有用。

- 这两个属性都是只读的，不能通过赋值来修改它们。

- 在使用这些属性时，应注意浏览器的同源策略（Same-Origin Policy），这可能会限制不同源（协议、域名、端口任一不同）的窗口之间的交互。