HTML5的postMessage的使用手册


Posted in HTML / CSS onDecember 19, 2018

我们在码代码的时候,经常会碰到以下跨域的情况:

1、页面内嵌套iframe,与iframe的消息传递

2、页面与多个页面之间的传递消息

针对这些令人头疼的跨域问题,html5特地推出新功能--postMessage(跨文档消息传输)。postMessage在使用时,需要传入2个参数,data和originUrl。data是指需要传递的内容,但是部分浏览器只能处理字符串参数,所以我们一般把data序列化一下,即JSON.stringify(),originUrl是指目标url,指定的窗口。

下面直接甩例子,相信大家更容易理解写。

1、页面内嵌套iframe

父页面:

html:

<div id='parent'>hello word postMessage</div>
<iframe src="http://127.0.0.1:8082/index2.html" id='child'></iframe>

js:

window.onload=function(){

    window.frames[0].postMessage('postMessage','http://127.0.0.1:8082/index2.html')

} 

window.addEventListener('message',function(e){

    console.log(e)

    document.getElementById('parent').style.color=e.data

})

子页面:

html:

<div id='button' onclick='changeColor();' style="color:yellow">接受信息</div>

js:

window.addEventListener('message',function(e){

      console.log(e)

      let color = document.getElementById('button').style.color

      window.parent.postMessage(color,'http://127.0.0.1:8081/index.html')

});

function changeColor(){

      let buttonColor = document.getElementById('button').style.color

      buttonColor='#f00'           

      window.parent.postMessage(buttonColor,'http://127.0.0.1:8081/index.html')

}

父页面通过postMessage的方法向iframe传递消息,而子页面通过window.addEventListener监听message方法来获取到父页面传递的值。如下图所示,data是父页面传递的值。

HTML5的postMessage的使用手册

子页面向父页面传递消息,也是通过postMessage的方法去传递消息,不是过是以window.parent.postMessage(data,url)的方式传值。父页面获取值也是同样监听message事件。

2、多页面之间传递消息

父页面:

html:

<div id='parent' onclick="postMessage()">hello word postMessage</div>

js:

let parent = document.getElementById('parent')

function postMessage(){

    let windowOpen=window.open('http://127.0.0.1:8082/index2.html','postMessage')

    setTimeout(function(){

       windowOpen.postMessage('postMessageData','http://127.0.0.1:8082/index2.html')

  },1000) 

}

子页面:

html:

<div id='button' onclick='changeColor();' style="color:#f00">接受信息</div>

js:

window.addEventListener('message',function(e){

      console.log(e)

 });

父页面向子页面传递消息通过window.open打开另一个页面,然后向他传值。需要注意的是,使用postMessage传值的时候需要使用setTimeout去延迟消息的传递,因为子页面的加载不是一下子就加载完成的,也就是说子页面的监听事件还未开始,此时传值过去是接收不到的。

HTML5的postMessage的使用手册

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 #HTML / CSS
Canvas globalCompositeOperation
Dec 18 #HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 #HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 #HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 #HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 #HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 #HTML / CSS
You might like
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
PHP错误机制知识汇总
2016/03/24 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
PHP7新特性
2021/03/09 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
python求众数问题实例
2014/09/26 Python
python中反射用法实例
2015/03/27 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Python实现的质因式分解算法示例
2018/05/03 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
通过实例解析Python return运行原理
2020/03/04 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
企业办公室主任岗位职责
2014/02/19 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
Linux中如何安装并部署Redis
2022/04/18 Servers