点击查看demo

前言

web开发了,除了前台与服务器交换数据,还有可能前台页面间需要进行数据传递,比如窗口间,页面和嵌套的iframe间。这些问题之前都有解决办法,但是现在html5引入的message的API可以更方便、有效、安全的解决这些问题。

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可实现跨文本档、多窗口、跨域消息传递。

参数

postMessage( data , origin , [transfer] ),接受两个参数

1.data:​需要传递的数据,html5规范中该参数可以是JavaScript中的任意基本类型或可复制的对象,但是不是所有浏览器都能完美支持html5,所有还是用JSON将数据序列化比较好。

2.origin :​​目标字符串参数,指明目标窗口。其值可以是字符串“*”(表示无限制)或者一个URI。

3.transfer:​是一串和message同时传递的Transferable对象。这些对象的所有权将被转移给消息的接收方,发送方不再保有所有权。

发送消息

otherWindow.postMessage( data , origin , [transfer] )

otherWindow为其他窗口的一个引用,比如iframe的contentWindow属性、执行window.open返回的窗口对象,或者是命名过或数值索引的window.frames.

接受消息

接收消息比较简单,只需要当前窗口监听message事件。

window.addEventListener('message' , function( event ){

} , false );

event为一个对象,它的属性有:

  • data : 数据字段
  • origin : 调用postMessage 时消息发送方窗口的origin
  • source : 对发送消息窗口对象的引用,可用来在具有不同origin的两个窗口间建立双向通信。

最新文章

  1. NodeJs之pm2
  2. DbUtility v3
  3. wp8 入门到精通 Gallery
  4. jquery中$("#afui").get(0)为什么要加get(0)呢?
  5. 20 Free Open Source Web Media Player Apps
  6. Java Script基础(十二) 正则表达式
  7. jquery源码分析学习地址
  8. Tcpcopy简介与实战
  9. win7重新安装win7
  10. C#/.NET使用HttpWebRequest、SqlBulkCopy从API获取数据批量插入DB
  11. NULL指针 Void* 和野指针
  12. .xlsx文件总是默认用2007 Microsoft Office component 打开,且无法更改用EXCEL打开的解决方法
  13. C++容器学习,与结构体排序和set来一场邂逅
  14. setTimeout与setInterval的区别浅析
  15. [深度思考]·为什么CNN是同步(并行)而RNN是异步(串行)的呢?
  16. Google Android SDK开发范例大全笔记 一
  17. com.mysql.cj.core.exceptions.InvalidConnectionAttributeException: The server time zone value '��� mysql-installer-community-8.0.15.0
  18. day2.jmeter简单压测,下载文件,Charles手机抓包准备
  19. 蓝桥杯 剪邮票(dfs枚举 + bfs)
  20. Android Launcher分析和修改3——Launcher启动和初始化

热门文章

  1. Nodejs微信公众号开发
  2. sqlserver查询连续签到天数
  3. Oracle数据库操作---基础使用(二)
  4. Another kind of Fibonacci(矩阵)
  5. 盒子模型的margin负数用法
  6. SpringBoot拦截器中无法注入bean的解决方法
  7. 初学HTML-4
  8. 关于HTML框架(frameset)的一些基本用法
  9. 大数据java基础day01
  10. CSS中的三种常用定位