【JS】postMessage 用法（可以给iframe传值）(javascript postmessage)

编辑：rootadmin

【JS】postMessage 用法（可以给iframe传值）文章目录基本概念代码案例基本概念

推荐整理分享【JS】postMessage 用法（可以给iframe传值）(javascript postmessage)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js发送post请求获取数据,js $.post,js发送post,js 发送post请求,js 发送post请求,js发送post请求json,js发送post请求json,js $.post,内容如对您有帮助，希望把文章链接给更多的朋友！

跨文档消息，有时候也简称为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>运行结果：

本文链接地址:https://www.jiuchutong.com/zhishi/289606.html 转载请保留说明！

上一篇：格里博耶多夫运河和滴血救世主教堂，俄罗斯圣彼得堡 (© Tomas Sereda/Getty Images)(格里戈里耶奈尔尤伯夫)

下一篇：瓜纳华托，墨西哥 (© AI NISHINO/Alamy)(瓜纳华托大学世界排名)