postMessage的使用

postMessage的使用postMessage是H5的API,用来解决跨页面通信的。postMessage的使用分为发送方和接收方。发送方的代码用法如下:otherWindow.postMessage(message,targetOrigin,[transfer]);otherWindow是接收方的window对象。可以通过以下几种方法获得,例如window.open()方法返回的值就是打开页面的window对象,或…

大家好,又见面了,我是你们的朋友全栈君。

postMessage是H5的API,用来解决跨页面通信的。postMessage的使用分为发送方和接收方。

发送方的代码用法如下:

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow是接收方的window对象。可以通过以下几种方法获得,例如window.open()方法返回的值就是打开页面的window对象,或者iframe元素的contentWindow属性能获得iframe标签内页面的window对象,等等。

message是你要发送到其他 window的数据。

targetOrigin是接收方域,即接收方页面的window.origin属性。如果接收方窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送。该参数也可以是‘*’,表示对接收方的域没有任何限制。

[transfer]是可选项,数组内的对象是实现Transferable接口的对象。它和message一样会被传递给目标页面,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。

接收方要开启事件监听,监听message事件,接收方的代码如下:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  var origin = event.origin; 
  if (origin !== "http://example.org:8080")// 假设接受方只接受来自http://example.org:8080域的信息
    return;
  // ...
}

这里的event是MessageEvent的实例,里面包含了data、origin、source属性。data是发送方发送的message,origin是发送方所属的域,source是发送方的window对象的引用。

案例以后在进行补充…

更多详情请看MDN,链接地址:
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/158555.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 开源报表编辑器 java_常用的6款Java开源报表制作工具[通俗易懂]

    开源报表编辑器 java_常用的6款Java开源报表制作工具[通俗易懂]本文为大家推荐6款常用的Java开源报表制作工具,供开发者学习、参考。1.Aspose.CellsforJasperReports一个基于Java的开源报表工具,它可以在Java环境下像其他IDE报表工具一样来制作报表,支持PDF、HTML、XLS、CSV和XML文件输出格式,是当前Java开发者最常用的报表工具。2.BIRT一个Eclipse-based开放源代码报表系统。它主要是用在基于J…

    2022年10月20日
    4
  • pychram mac 激活码【2021免费激活】

    (pychram mac 激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月27日
    45
  • hackbar 使用教程_hackbar简单安装使用教程

    hackbar 使用教程_hackbar简单安装使用教程安装hackbar:在火狐的附加组件中搜索“hackbar”,将它添加到火狐浏览器中,重启后Firefox后安装完成,按F9键打开我们就会看到在地址栏下面会出现一个大框框就是hackbar了框框很大碍事怎么办?简单啊F9试试首先先介绍横向第一排的下拉框:INT、HEX、OCT、Alphabet、AlNum分别代表了整数、十六进制、八进制、字母表、所有。假设你的输入框中有a这个字符,然后你将…

    2022年6月4日
    647
  • 未来最有市场发展前景的十大通信技术企业_各行业发展前景

    未来最有市场发展前景的十大通信技术企业_各行业发展前景未来最有市场发展前景的十大通信技术2003-03-2410:39/(通讯世界)  通信技术的发展已经脱离纯技术驱动的模式,正在走向技术与业务相结合、互动的新模式,从世界范围内,预计在未来十年,从市场应用和业务需求的角度看,最大和最深刻的变化将是从语音业务向数据业务的战略性转变,这种转变将深刻影响通信技术的走向。

    2022年9月11日
    3
  • Java异常类型及处理

    Java异常类型及处理前言:Java异常,大家都很熟悉。但是对于具体怎么分类的,JVM对其怎么处理的,代码中怎么处理的,应该怎么使用,底层怎么实现的等等,可能就会有些不是那么清晰。本文基于此详细捋一下异常类型,实现以及使用时应怎么注意。一、异常实现及分类1.先看下异常类的结构图上图可以简单展示一下异常类实现结构图,当然上图不是所有的异常,用户自己也可以自定义异常实现。上图已经足够帮我们解释和理解异常…

    2022年5月19日
    37
  • PHPSTORM去除警告波浪线的方法

    PHPSTORM去除警告波浪线的方法

    2022年2月19日
    57

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号