js弹出窗口怎么和父页面交互

js弹出窗口和父页面交互的方法有：window.opener属性、postMessage方法、localStorage/sessionStorage。其中，window.opener属性是最常用的一种方法，通过该属性可以直接访问父页面的DOM和JavaScript对象，实现数据的传递和操作。

一、WINDOW.OPENER属性

window.opener属性是指向打开当前窗口的父窗口的一个引用。这个属性允许子窗口访问父窗口的JavaScript对象和DOM元素。以下是详细的解释和使用示例：

1、基本概念

当你使用window.open方法打开一个新的窗口或标签页时，新的窗口会自动获得一个window.opener属性，这个属性指向打开它的父窗口。因此，子窗口可以通过这个属性与父窗口进行交互。

2、示例代码

父页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
</head>
<body>
    <h1>Parent Page</h1>
    <button onclick="openChild()">Open Child Window</button>
    <div id="message">No message yet.</div>
    <script>
        function openChild() {
            window.open('child.html', 'Child Window', 'width=400,height=300');
        }
        function receiveMessage(message) {
            document.getElementById('message').textContent = message;
        }
    </script>
</body>
</html>

子页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Page</title>
</head>
<body>
    <h1>Child Page</h1>
    <button onclick="sendMessage()">Send Message to Parent</button>
    <script>
        function sendMessage() {
            if (window.opener && !window.opener.closed) {
                window.opener.receiveMessage('Hello from the child window!');
            }
        }
    </script>
</body>
</html>

在这个示例中，父页面通过window.open打开子页面，子页面通过window.opener访问父页面的receiveMessage函数，将消息传递回父页面。

二、POSTMESSAGE方法

postMessage方法是一种安全的方法，用于在不同的窗口或iframe之间进行通信。它允许跨域传递消息，并且可以指定消息的接收者的源（origin），从而提高安全性。

1、基本概念

postMessage方法可以在不同源之间传递消息，它接受两个参数：消息内容和目标源。目标源是指接收消息的窗口的源，只有当接收窗口的源与指定的目标源匹配时，消息才会被接收。

2、示例代码

父页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
</head>
<body>
    <h1>Parent Page</h1>
    <button onclick="openChild()">Open Child Window</button>
    <div id="message">No message yet.</div>
    <script>
        let childWindow;
        function openChild() {
            childWindow = window.open('child.html', 'Child Window', 'width=400,height=300');
            window.addEventListener('message', receiveMessage);
        }
        function receiveMessage(event) {
            if (event.origin !== 'http://example.com') {
                // Ignore messages from unknown origins
                return;
            }
            document.getElementById('message').textContent = event.data;
        }
    </script>
</body>
</html>

子页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Page</title>
</head>
<body>
    <h1>Child Page</h1>
    <button onclick="sendMessage()">Send Message to Parent</button>
    <script>
        function sendMessage() {
            window.opener.postMessage('Hello from the child window!', 'http://example.com');
        }
    </script>
</body>
</html>

在这个示例中，父页面通过window.open打开子页面，并通过window.addEventListener('message', receiveMessage)监听消息。子页面通过window.opener.postMessage方法将消息发送给父页面。

三、LOCALSTORAGE/SESSIONSTORAGE

localStorage和sessionStorage是用于在浏览器中存储数据的Web存储API。它们可以在不同的窗口或标签页之间共享数据，从而实现窗口之间的通信。

1、基本概念

localStorage数据在浏览器关闭后仍然存在，而sessionStorage数据在浏览器关闭后会被清除。它们都可以通过setItem和getItem方法来存储和获取数据。

2、示例代码

父页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
</head>
<body>
    <h1>Parent Page</h1>
    <button onclick="openChild()">Open Child Window</button>
    <div id="message">No message yet.</div>
    <script>
        function openChild() {
            window.open('child.html', 'Child Window', 'width=400,height=300');
        }
        window.addEventListener('storage', function(event) {
            if (event.key === 'message') {
                document.getElementById('message').textContent = event.newValue;
            }
        });
    </script>
</body>
</html>

子页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Page</title>
</head>
<body>
    <h1>Child Page</h1>
    <button onclick="sendMessage()">Send Message to Parent</button>
    <script>
        function sendMessage() {
            localStorage.setItem('message', 'Hello from the child window!');
        }
    </script>
</body>
</html>

在这个示例中，父页面通过window.addEventListener('storage', function(event) { ... })监听localStorage的变化。子页面通过localStorage.setItem方法将消息存储到localStorage中，从而实现与父页面的通信。

四、结论

在实现JS弹出窗口和父页面交互时，window.opener属性是最简单直接的方法，但仅适用于同源窗口。postMessage方法提供了更强大的跨域通信能力，并且更安全。localStorage/sessionStorage方法适用于需要在不同窗口或标签页之间共享数据的场景。

对于团队协作和项目管理，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们提供了强大的项目管理和团队协作功能，能够有效提升工作效率和团队协作能力。

js弹出窗口怎么和父页面交互

一、WINDOW.OPENER属性

1、基本概念

2、示例代码

二、POSTMESSAGE方法

1、基本概念

2、示例代码

三、LOCALSTORAGE/SESSIONSTORAGE

1、基本概念

2、示例代码

四、结论

相关问答FAQs：