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中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 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计算指定目录下文件占用空间的方法
2015/03/13 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
js 操作符实例代码
2009/10/24 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
JS原型链怎么理解
2016/06/27 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
js实现小时钟效果
2020/03/25 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
详细介绍Python语言中的按位运算符
2013/11/26 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
用Python写一个自动木马程序
2019/09/17 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
Python wordcloud库安装方法总结
2020/12/31 Python
财务会计专业应届毕业生求职信
2013/10/18 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
五年级上册复习计划
2015/01/19 职场文书
太空授课观后感
2015/06/17 职场文书
公司周年庆典致辞
2015/07/30 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python