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 相关文章推荐
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 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
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
微信支付扫码支付php版
2016/07/22 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
flask项目集成swagger的方法
2020/12/09 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
团组织关系介绍信
2014/01/12 职场文书
教师绩效考核方案
2014/01/21 职场文书
如何写求职信
2014/05/24 职场文书
雷人标语集锦
2014/06/19 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript