js opener的使用详解

JavaScript中的opener

在JavaScript中，window.opener是一个全局对象，它代表调用当前窗口的父窗口对象。即如果我们使用一个子窗口来打开一个页面，那么该页面中的window.opener就代表了该子窗口的父窗口对象。opener对象的使用非常灵活，提供了多种用法。下面我们来详细了解一下opener对象。

属性

window.opener中包含了一些常用的属性：

• opener.closed：判断打开当前窗口的原窗口是否已经被关闭。
• opener.document：代表当前窗口所属的原窗口的文档对象，可以通过该对象访问到原窗口的各种元素和DOM属性。
• opener.location：代表当前窗口所属的原窗口的定位对象。

方法

window.opener中还有一些常用的方法：

• opener.close()：关闭当前窗口的原窗口。
• opener.focus()：将焦点聚焦到当前窗口的原窗口。
• opener.alert()：在当前窗口的原窗口中弹出一个警告框。
• opener.prompt()：在当前窗口的原窗口中弹出一个提示框。

应用场景

1. 父子窗口之间互相操作

通过window.opener可以非常方便地实现父子窗口之间的互相操作。

例如，在父窗口中有一个按钮，点击该按钮可以弹出一个子窗口。在子窗口中有一个按钮，点击该按钮可以修改父窗口中的某个元素的值。这时就可以使用window.opener来实现。下面是示例代码：

<!-- 在父窗口中 -->
<button onclick="openChild()">打开子窗口</button>

<script>
function openChild() {
  window.open('child.html');
}

function changeValue(value) {
  document.querySelector('#value').innerHTML = value;
}
</script>

<!-- 在子窗口中 -->
<button onclick="changeValue()">修改值</button>

<script>
function changeValue() {
  window.opener.changeValue('new value');
}
</script>

如上所示，子窗口中可以通过window.opener来调用父窗口中的changeValue方法，来修改父窗口中的元素值。

2. 页面跳转传递数据

通过window.opener还可以实现页面之间的信息传递。

例如，在一个页面中点击一个按钮跳转到另一个页面，并将一些数据传递给另一个页面。可以使用window.opener来实现。下面是示例代码：

<!-- 在第一个页面中 -->
<button onclick="gotoSecondPage()">跳转到第二个页面</button>

<script>
function gotoSecondPage() {
  window.open('second.html?data=hello');
}
</script>

如上所示，我们在跳转到第二个页面时，在URL中传递了一个参数data=hello。

<!-- 在第二个页面中 -->
<script>
const data = window.location.search.substring(1).split('=')[1];
alert(data); // 弹出 hello
</script>

如上所示，我们在第二个页面中通过window.location来获取URL中的参数值，然后进行相应的操作。