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>