专栏首页青青天空树postMessage 消息传递

postMessage 消息传递

点击查看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的两个窗口间建立双向通信。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • html5学习笔记(一)

    5. video元素允许多个source元素。source元素可以连接不同的视频文件,浏览器将会使用第一个可识别的格式

  • Nginx+Tomcat实现负载均衡

    在103和117上分别部署相同的Tomcat程序,修改index.jsp页面,把内容改为各自的IP地址。

    会跳舞的机器人
  • 【干货】”首个“ .NET Core 验证码组件

    众所周知,Dotnet Core目前没有图形API,以前的System.Drawing程序集并没有包含在Dotnet Core 1.0环境中。不过在dotne...

    yoyofx
  • 重构并没有你想象的那么简单

      上个月,有个以前的同事问我:“你在的时候,为什么不把原来的系统都重做了,我们明明有实力啊”。

    AWeiLoveAndroid
  • 快速在线制作json接口,从此写项目引入接口就简单多了

    AWeiLoveAndroid
  • 【安富莱二代示波器教程】第10章 示波器设计—数字信号处理

    本章节为大家讲解二代示波器中用到的FFT和FIR。单纯从应用上来说,比较省事,调用API函数即可,从学习的角度来说,需要大家花点精力。

    用户2977066
  • .NET Core第三方开源Web框架YOYOFx

    YOYOFx是一个轻量级用于构建基于 HTTP 的 Web 服务,基于 .NET 和 Mono 平台。

    yoyofx
  • .NET Core爬坑记 1.0 项目文件

      之所以要写这个系列是因为在移植项目到ASP.NET Core平台的过程中,遇到了一些“新变化”,这些变化有编译方面的、有API方面的,今天要讲的是编译方面的...

    yoyofx
  • Android适配全面总结(一)----屏幕适配

    版权声明:本文为博主原创文章(部分引用他人博文,已加上引用说明),未经博主允许不得转载。https://www.jianshu.com/p/7aa34434ad...

    AWeiLoveAndroid
  • kubernetes源码阅读笔记:理清 kube-apiserver 的源码主线

    我最近开始研究 kubernetes 源码,希望将阅读笔记记录下来,分享阅读思路和心得,更好的理解 kubernetes,这是第一篇,从 kube-apiser...

    imroc

扫码关注云+社区

领取腾讯云代金券