js同级弹窗实现数据传输修改

window.postMessage 是一种用于实现跨窗口通信的 HTML5 特性。它允许在不同窗口或 iframe 之间安全地传递数据,即使这些窗口来自不同的域名。

window.postMessage 方法接受两个参数:

message:要发送的消息,可以是一个字符串或一个对象。
targetOrigin:指定接收消息的窗口的源(origin)。通常为目标窗口的域名,也可以是通配符,如 *,表示可以接收来自任何源的消息。
发送消息的窗口可以是任何 DOM 元素,如窗口、iframe 或弹窗。接收消息的窗口需要通过监听 message 事件来处理收到的消息。

以下是一个示例,演示如何使用 window.postMessage 在父级页面和子页面之间进行跨窗口通信:

在父级页面中:

// 监听message事件
window.addEventListener('message', function(event) {
    // 确保消息来自可信任的源
    if (event.origin !== 'https://child-page.com') {
        return;
    }

    // 处理接收到的消息
    console.log('父级页面收到消息:', event.data);
});

// 向子页面发送消息
var childWindow = document.getElementById('child-iframe').contentWindow;
childWindow.postMessage('Hello from parent!', 'https://child-page.com');

在子页面中(iframe 页面):

// 监听message事件
window.addEventListener('message', function(event) {
    // 确保消息来自可信任的源
    if (event.origin !== 'https://parent-page.com') {
        return;
    }

    // 处理接收到的消息
    console.log('子页面收到消息:', event.data);

    // 向父级页面回复消息
    event.source.postMessage('Hello from child!', 'https://parent-page.com');
});

在这个示例中,父级页面和子页面都通过监听 message 事件来接收消息,并使用 event.data 来访问消息内容。父级页面向子页面发送消息,子页面接收后回复了一条消息。

注意:在实际应用中,要确保安全性,你应该验证消息的来源(event.origin)以防止不受信任的源发送恶意消息。


在子页面中,你可以在不使用 window.addEventListener 的情况下向父页面发送消息,而是使用直接的 JavaScript 语句。以下是一个示例:

在子页面中 (child_page.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>子页面</title>
</head>
<body>
    <!-- 子页面内容 -->

    <script>
        // 向父页面发送消息
        window.parent.postMessage('Hello from child!', 'https://parent-page.com');
    </script>
</body>
</html>

在这个示例中,子页面中的 JavaScript 代码直接在加载页面时就向父页面发送消息,而不需要在 window.addEventListener 中编写代码。

这种方式适用于一些简单的场景,其中子页面加载后立即需要向父页面发送消息。如果需要更复杂的消息传递或需要在特定事件发生时发送消息,那么使用 window.addEventListener 来监听消息事件可能更合适。

你可能感兴趣的:(javascript,开发语言,layui)