From 6471ca33614335ea060ac72e281a18d8f3494394 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Tue, 11 Feb 2025 10:28:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B7=A8=E5=9F=9F=E8=B7=A8=E7=AA=97?=
 =?UTF-8?q?=E5=8F=A3=E7=88=B6=E5=AD=90=E7=AA=97=E5=8F=A3=E4=B9=8B=E9=97=B4?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87postMessage=E9=80=9A=E4=BF=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demoHtml/postMessage/child.html  | 35 +++++++++++++++++++++++++++++
 demoHtml/postMessage/parent.html | 38 ++++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 demoHtml/postMessage/child.html
 create mode 100644 demoHtml/postMessage/parent.html
diff --git a/demoHtml/postMessage/child.html b/demoHtml/postMessage/child.html
new file mode 100644
index 0000000..f683fa9
--- /dev/null
+++ 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>
diff --git a/demoHtml/postMessage/parent.html b/demoHtml/postMessage/parent.html
new file mode 100644
index 0000000..81cdf95
--- /dev/null
+++ 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>
