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实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 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 过滤危险html代码
2009/06/29 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
js类的静态属性和实例属性的理解
2009/10/01 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
基于Python中的yield表达式介绍
2019/11/19 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
船舶专业个人求职信范文
2014/01/02 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
护校行动方案
2014/05/31 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
Pandas数据结构之Series的使用
2022/03/31 Python
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技