两个系统双向通信.zip

共3个文件

html：2个

json：1个

iframe

0 下载量 52 浏览量 2025-06-17 21:10:47 上传评论收藏 3KB ZIP 举报

温馨提示

在前端页面实用iframe实现两个系统双向通信

资源推荐

资源详情

资源评论

收起资源包目录

两个系统双向通信.zip （3个子文件）

两个系统双向通信

.vscode

settings.json 42B

parent.html 1KB

child.html 1024B

共 3 条

<!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>

评论收藏

内容反馈