当前位置：首页 > wzjs >正文

怎样自己创网站营销排名seo

wzjs 2025/7/28 16:02:44

怎样自己创网站,营销排名seo,做网站购买虚拟主机送模板吗,芜湖代理公司注册浏览器实现跨系统交互浏览器中通过 iframe 嵌入另一个系统，并实现跨系统消息交互的详细系统讲解，包括原理、安全机制、实现流程、使用场景以及常见问题的全面说明感兴趣的可以关注一下，会不定期分享一些实用笔记https://mp.weixin.qq.com/s…

浏览器实现跨系统交互

浏览器中通过 iframe 嵌入另一个系统，并实现跨系统消息交互的详细系统讲解，包括原理、安全机制、实现流程、使用场景以及常见问题的全面说明

感兴趣的可以关注一下，会不定期分享一些实用笔记https://mp.weixin.qq.com/s/d12PcS16VUeXfylvUlkD1g

🧠 一、系统整体结构与原理

💡 1.1 基本结构

假设系统 A 通过iframe标签嵌入系统 B

<!-- 系统 A 页面 -->
<iframe src="https://system-b.com/page.html" id="myFrame"></iframe>

此时浏览器中就有两个独立的页面：

外部父页面：系统 A
内嵌子页面：系统 B

这两个页面通常是**不同源（跨域）**的，浏览器会强制阻止它们直接互访 DOM 或脚本资源。

🔒 1.2 浏览器同源策略（SOP）

同源策略（Same-Origin Policy）限制：

如果两个页面协议、主机名、端口号任一不同，就被认为是不同源
不同源的 iframe 无法直接访问 document、window、cookie 等对象

⛔ 错误示例（会报错）

let iframe = document.getElementById("myFrame");
let doc = iframe.contentWindow.document; // ❌ 跨域会报错

📬 1.3 安全通信机制：window.postMessage

HTML5 引入了 window.postMessage()，允许跨源通信：

不需要同源
可用于 window、iframe、popup、worker 等之间通信

🛠️ 二、通信实现流程

✅ 2.1 iframe 向父页面发送数据

// system-b.com/page.html
window.parent.postMessage({type: "formSubmit",data: { name: "Alice", age: 30 }},"https://system-a.com" // 安全校验目标
);

✅ 2.2 父页面接收消息

// system-a.com/index.html
window.addEventListener("message", (event) => {// 校验来源（安全性）if (event.origin !== "https://system-b.com") return;// 处理消息const msg = event.data;if (msg.type === "formSubmit") {console.log("收到表单数据：", msg.data);}
});

🔐 三、安全机制详解

🔎 3.1 校验 event.origin

绝对不能省略，否则容易被其他恶意网站注入数据

if (event.origin !== "https://trusted.com") return;

🧱 3.2 指定 targetOrigin

当调用 postMessage 时，第二个参数一定不要写成 ‘*’，应指明目标源

window.parent.postMessage(data, "https://trusted-parent.com");

🔐 3.3 不直接执行任何收到的数据

避免 XSS 攻击，收到的数据不要拼接进 HTML 或使用 eval() 执行

🧩 四、典型应用场景

应用场景	示例
第三方支付组件嵌入	微信/支付宝嵌入支付页面，通过 iframe 回传支付结果
登录认证	子系统嵌入父系统并通过 `postMessage` 回传 token
微前端架构通信	主应用与子应用之间传递状态、事件、消息
可视化平台组件传值	父系统向嵌入的地图组件传递筛选参数等

🧪 五、常见问题与解决方案

❓ 5.1 子页面 ready 但父页面未监听

确保父页面在 iframe 加载前就监听：

window.addEventListener("message", onMessage, false);

❓ 5.2 想等待子页面返回消息

可以封装为 Promise：

function waitForIframeMessage() {return new Promise((resolve) => {const listener = (event) => {if (event.origin !== "https://system-b.com") return;resolve(event.data);window.removeEventListener("message", listener);};window.addEventListener("message", listener);});
}// 使用
waitForIframeMessage().then((data) => {console.log("收到子页面消息：", data);
});

📌 六、总结对比

技术	是否支持跨域	优点	缺点
`window.postMessage`	✅ 是	安全、灵活、被广泛支持	需要双端配合
`iframe.contentWindow.document`	❌ 否	简单	跨域受限
`window.name + 重定向`	✅ 是	旧方案，少见	复杂、支持差
`BroadcastChannel`	部分跨域	多窗口广播消息	跨域支持有限

🧱 七、实例Demo（单项通信）

7.1✅ 演示目标

父页面嵌入 iframe
子页面向父页面发送数据
父页面接收并处理数据

7.2 📁 项目结构（两个 HTML 文件）

/demo
├── parent.html      // 系统 A
└── child.html       // 系统 B

7.3 🧩 parent.html（系统 A：父页面）

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>父页面 (System A)</title>
</head>
<body><h2>父页面 (System A)</h2><iframe id="childFrame" src="child.html" width="600" height="300"></iframe><p>收到的消息：<span id="msgDisplay">（等待中...）</span></p><script>// 监听来自 iframe 的消息window.addEventListener("message", function(event) {// 校验来源（本地 demo 用 *，实际项目请写明域名）if (event.origin !== window.origin && event.origin !== "null") {console.warn("不可信来源：", event.origin);return;}console.log("父页面收到消息：", event.data);document.getElementById("msgDisplay").innerText = JSON.stringify(event.data);});</script>
</body>
</html>

7.4 🧩 child.html（系统 B：iframe 子页面）

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>子页面 (System B)</title>
</head>
<body><h2>子页面 (System B)</h2><button onclick="sendMessage()">向父页面发送消息</button><script>function sendMessage() {const message = {type: "greeting",data: { text: "你好，父页面！", time: new Date().toISOString() }};// 向父页面发送消息window.parent.postMessage(message, "*"); // 实际部署请替换 * 为具体域名}</script>
</body>
</html>

7.5 ✅ 效果说明

打开 parent.html 页面，自动加载 child.html。
点击子页面按钮后，子页面向父页面发送消息。
父页面成功接收到并展示消息内容。

🧱 八、实例Demo（双向通信）

8.1 🎯 新目标：父页面 ⇄ 子页面双向通信

我们将实现以下功能：

操作方	行为
✅ 子页面	向父页面发送消息（按钮点击）
✅ 父页面	接收子页面消息并展示
✅ 父页面	向子页面主动发送消息（按钮点击）
✅ 子页面	接收父页面消息并在页面中展示

8.2 📁 文件结构（不变）

/demo
├── parent.html      // 系统 A
└── child.html       // 系统 B

8.3 🧩parent.html（双向通信实现）

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>父页面 (System A)</title>
</head>
<body><h2>父页面 (System A)</h2><iframe id="childFrame" src="child.html" width="600" height="300"></iframe><p>收到来自子页面的消息：<span id="msgDisplay">（等待中...）</span></p><button onclick="sendToChild()">向子页面发送消息</button><script>const childFrame = document.getElementById("childFrame");// 监听来自 iframe 的消息window.addEventListener("message", function(event) {if (event.origin !== window.origin && event.origin !== "null") {console.warn("非法来源：", event.origin);return;}console.log("✅ 父页面收到消息：", event.data);document.getElementById("msgDisplay").innerText = JSON.stringify(event.data);});// 向子页面发送消息function sendToChild() {const message = {type: "parentToChild",data: { text: "你好，子页面！我是父页面。" }};childFrame.contentWindow.postMessage(message, "*"); // 实际部署时指定 origin}</script>
</body>
</html>

8.4 🧩child.html（接收父页面消息 + 回发）

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>子页面 (System B)</title>
</head>
<body><h2>子页面 (System B)</h2><button onclick="sendToParent()">向父页面发送消息</button><p>收到来自父页面的消息：<span id="msgFromParent">（等待中...）</span></p><script>// 发送消息给父页面function sendToParent() {const message = {type: "childToParent",data: { text: "你好，父页面！我是子页面。" }};window.parent.postMessage(message, "*");}// 监听父页面的消息window.addEventListener("message", function(event) {if (event.origin !== window.origin && event.origin !== "null") {console.warn("非法来源：", event.origin);return;}console.log("✅ 子页面收到消息：", event.data);document.getElementById("msgFromParent").innerText = JSON.stringify(event.data);});</script>
</body>
</html>