feat: 跨域跨窗口父子窗口之间通过postMessage通信

11 months ago · 6471ca3361
parent 5c07d8461c
commit 6471ca3361
2 changed files with 73 additions and 0 deletions
--- a/demoHtml/postMessage/child.html
+++ b/demoHtml/postMessage/child.html
@ -0,0 +1,35 @@
 <!doctype html>
 <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>Child Window</title>
    </head>
    <body>
        <div>我是子窗口</div>
        <button id="sendMsg">点击给父窗口发送信息</button>
        <script>
            let parentWindow;
            // 监听来自父窗口的消息
            window.addEventListener('message', (event) => {
                // 验证消息来源
                if (event.origin === 'https://your-parent-domain.com') {
                    console.log('接受父窗口跨域跨标签消息', event.data);
                    parentWindow = event.source;
                }
            });
            document.getElementById('sendMsg').onclick = function () {
                // 方式一，必须依赖父窗口先发消息给子窗口
                // parentWindow.postMessage('给父窗口传跨域跨标签消息', 'https://your-parent-domain.com');
                // 方式二，可以直接给父窗口发消息
                window.opener.postMessage('给父窗口传跨域跨标签消息', 'https://your-parent-domain.com');
            };
        </script>
    </body>
 </html>
--- a/demoHtml/postMessage/parent.html
+++ b/demoHtml/postMessage/parent.html
@ -0,0 +1,38 @@
 <!doctype html>
 <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>Parent Window</title>
    </head>
    <body>
        <div>我是父窗口</div>
        <button id="openWindow">打开一个新的子窗口</button>
        <button id="sendMsg">点击给子窗口发送信息</button>
        <script>
            // 存储子窗口实例
            let childWindow;
            document.getElementById('openWindow').onclick = function () {
                // 打开新窗口, 第三个参数内容必须带，否则不会以新的浏览器窗口打开，而是以新的标签页tab打开
                childWindow = window.open('https://child-domain.com', '_blank', 'width=800,height=600');
            };
            document.getElementById('sendMsg').onclick = function () {
                childWindow.postMessage('给子窗口传跨域跨标签消息', 'https://child-domain.com');
            };
            // 监听来自子窗口的消息
            window.addEventListener('message', (event) => {
                // 验证消息来源
                if (event.origin === 'https://child-domain.com') {
                    console.log('接受子窗口跨域跨标签消息:', event.data);
                }
            });
        </script>
    </body>
 </html>