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 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
CSS3正方体旋转示例代码
Aug 08 HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
AmazeUI中模态框的实现
Aug 19 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 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
JS实现php的伪分页
2008/05/25 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
JQuery for与each性能比较分析
2013/05/14 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
python如何在终端里面显示一张图片
2016/08/17 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
python的列表List求均值和中位数实例
2020/03/03 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
墨西哥网上超市:Superama
2018/07/10 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
Internet体系结构
2014/12/21 面试题
小学生暑假感言
2014/02/06 职场文书
有创意的广告词
2014/03/18 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
幼儿园安全管理制度
2015/08/05 职场文书