javascript window.opener的用法分析

2023年6月11日上午7:47 • JavaScript

接下来我将详细讲解“JavaScript window.opener的用法分析”。

什么是window.opener

window.opener 是一个指向打开当前窗口的父窗口的引用，它可以让我们在新开的窗口中与原来打开该窗口的父窗口进行通讯操作。如果当前窗口不是通过 window.open 打开的而是在当前窗口内直接打开了另一个窗口，此时该属性值为 null。

用法分析

window.opener 在一些场景中非常有用，例如：

在页面 A 中通过 window.open 打开了一个新页面 B，并且 B 中需要操作 A 中的 HTML 元素。
点击页面 A 中的按钮打开一个新的窗口，当在新的窗口中完成操作后需要将数据返回给原始窗口。

在这些场景中，我们可以使用 window.opener 来实现与父窗口的通讯。

示例

我们来通过两个示例说明 window.opener 的具体用法：

示例1：在新窗口中调用原窗口中的函数

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>index.html</title>
</head>
<body>
  <button onclick="openWindow()">打开窗口</button>
  <p id="content">这是原始窗口</p>

  <script>
    function openWindow() {
      var myWindow = window.open("child.html", "myWindow", "width=200,height=100");
    }

    function setContent(str) {
      document.getElementById("content").innerHTML = str;
    }
  </script>
</body>
</html>

<!-- child.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>child.html</title>
</head>
<body>
  <button onclick="callSetContent()">在原窗口中显示内容</button>

  <script>
    function callSetContent() {
      var openerWindow = window.opener;
      openerWindow.setContent("这是子窗口调用的");
    }
  </script>
</body>
</html>

在原始窗口中，我们定义了一个 setContent 函数来设置 id 为 content 的 p 标签中的内容。在子窗口中，我们通过 window.opener 获取原始窗口的引用，并调用 setContent 函数，在原始窗口中显示子窗口调用的内容。

示例2：在新窗口中向原窗口传值

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>index.html</title>
</head>
<body>
  <button onclick="openWindow()">打开窗口</button>
  <p>这是原始窗口</p>

  <script>
    function openWindow() {
      var myWindow = window.open("child.html", "myWindow", "width=200,height=100");
    }

    function setContent(str) {
      document.getElementById("content").innerHTML = str;
    }

    function getValue(value) {
      alert("获取到的值为：" + value);
    }
  </script>
</body>
</html>

<!-- child.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>child.html</title>
</head>
<body>
  <button onclick="sendValue()">向原窗口传值</button>

  <script>
    function sendValue() {
      var openerWindow = window.opener;
      openerWindow.getValue("我是子窗口传来的值");
    }
  </script>
</body>
</html>

在原始窗口中，我们定义了一个 getValue 函数来接收子窗口传过来的值，并用 alert 显示出来。在子窗口中，我们通过 window.opener 获取原始窗口的引用，并调用 getValue 函数，将值传递给原始窗口。