【JS】postMessage 用法（可以给iframe传值）

文章目录

基本概念
代码案例

基本概念

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

运行结果：

【JS】postMessage 用法（可以给iframe传值）相关推荐

Javascript模块化编程require.js的用法
JS模块化工具requirejs教程(一):初识requirejs http://www.runoob.com/w3cnote/requirejs-tutorial-1.html JS模块化工具req ...
几种location.href的区别 js实现网页防止被iframe框架嵌套功能 .
首先我们了解一下:window.location.href.location.href.self.location.href.parent.location.href.top.location.hre ...
js实现网页防止被iframe框架嵌套及几种location.href的区别
首先我们了解一下几种location.href的区别简单的说:几种location.href的区别js实现网页被iframe框架功能,感兴趣的朋友可以了解下首先我们了解一下:window.locat ...
Moment.js常见用法总结
From: https://www.jianshu.com/p/9c10543420de Moment.js常见用法总结 Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中 ...
Moment.js常见用法总结 1
Moment.js常见用法总结 Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中对时间的操作,提高了开发效率. 日常开发中,通常会对时间进行下面这几个操作:比如获取时 ...
js如何判断是否在iframe中及防止网页被别站用 iframe嵌套 (Load denied by X-Frame-Options)...
1. js如何判断是否在iframe中 //方式一 if (self.frameElement && self.frameElement.tagName == "IFRAME ...
VC自定义消息postmessage用法（消息响应函数）
VC 自定义消息 postmessage用法 1. 在 resource.h文件添加如下代码定一个自己的消息 #define WM_MY_MESSAGE WM_USER + 100 //------ ...
Toastr.js插件用法
toastr.js插件用法 toastr.js是一个基于jQuery的非阻塞通知的JavaScript库.toastr.js可以设定四种通知模式:成功.出错.警告.提示.提示窗口的位置.动画效果等都可 ...
highlight.js css,JS库之Highlight.js的用法详解
下载到本地后,新建个页面测试 1.在head中加入css和js的引用 highlight hljs.initHighlightingOnLoad(); 2.添加对应要显示的内容 # 读取文件内容 de ...
c语言调用Windows自定义消息,VC自定义消息postmessage用法（消息响应函数）
VC 自定义消息 postmessage用法 1. 在 resource.h文件添加如下代码定一个自己的消息 #define WM_MY_MESSAGE WM_USER + 100 //------ ...

【JS】postMessage 用法（可以给iframe传值）

文章目录

基本概念

代码案例

【JS】postMessage 用法（可以给iframe传值）相关推荐

最新文章

热门文章