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中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 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
实现“上一页”和“下一页按钮
2006/10/09 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
$()JS小技巧
2007/07/21 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
Node.js中使用jQuery的做法
2016/08/17 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
Python里disconnect UDP套接字的方法
2015/04/23 Python
python中reload(module)的用法示例详解
2017/09/15 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
Python 创建TCP服务器的方法
2020/07/28 Python
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
服装公司总经理岗位职责
2013/11/30 职场文书
学校志愿者活动总结
2014/06/27 职场文书
电影复兴之路观后感
2015/06/02 职场文书