js给iframe的src赋值（【JS】postMessage 用法（可以给iframe传值））

时间2025-04-29 14:55:50分类IT科技浏览4661

导读：基本概念跨文档消息，有时候也简称为XDM(cross-document messaging ...

基本概念

跨文档消息，有时候也简称为XDM(cross-document messaging)

是一种在不同执行上下文（如不同源的页面）间传递信息的能力。例如：www.wrox.com上的页面想要与包含在内嵌窗格中的p2p.wrox.com上面的页面通信 XMD的核心就是postMessage()方法 postMessage()方法：将message传递给指定窗口 postMessage(data,origin)方法接受两个参数： let iframeWindow = document.getElementById(myframe).contentWindow; iframeWindow.postMessage(aaa, http://www.wrox.com); 1. data: - 要传输的数据，推荐使用字符串格式，其他格式的浏览器的兼容性不好 - 如果要传输结构化数据，可以通过JSON.stringify处理，接收时用JSON.parse转换回来 2. origin: - 指明目标窗口的源，协议+主机+端口号[+URL] ，URL会被忽略，所以可以不写 - 如果不想限制接收目标源：可以传 * - 如果目标与当前窗口同源：可以传 / 接收消息 window.addEventListener(message,(event)=>{ // 判断源路径是否来自预期发生者 if(event.origin.includes(http://www.wrox.com)){ // 获取传过来的数据 console.log(event.data) // 再传回去一条消息 event.source.postMessage(已收到消息, p2p.wrox.com) } }) // event包含3个参数 - event.data: 接收到的数据 - event.origin: 发送消息的文档源 - event.source: 发生消息的文档中window对象的代理

代码案例

目录结构：父页面（main.html）： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>主页面</h1> <iframe id="child" src="./child.html"></iframe> <div> <h2>主页面跨域接收消息区域</h2> <div id="message"></div> </div> </body> <script> /* -------------iframe跨域数据传递--------------- */ //传递数据到子页面 window.onload = function() { document.getElementById(child).contentWindow.postMessage("主页面消息", "/") } //接受子页面传递过来的数据 window.addEventListener(message, function(event) { document.getElementById(message).innerHTML = "收到" + event.origin + "消息：" + event.data; }, false); </script> </html> 子页面（child.html）： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>子页面: </h1> <div> <div id="message"></div> </div> </body> <script> //接收父页面传过来的数据 window.addEventListener(message, function(event) { // 因此判断接收的消息源是否是父页面 if (event.origin.includes("http://127.0.0.1:8848")) { console.log(event); document.getElementById(message).innerHTML = "收到" + event.origin + "消息：" + event.data; //把数据传递给父页面 > top.postMessage(要传递的数据,父页面的url访问地址) window.top.postMessage("子页面消息收到", http://127.0.0.1:8848); } }, false); </script> </html> 运行结果：

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。