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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Oracle函数写法和举例[通俗易懂]

    Oracle函数写法和举例[通俗易懂]1、declare声明变量后的每个变量都要加分号;2、所有的语句结束和sql语句结尾,都要加分号;3、变量赋值variable:=’1234’如:recordId:=’1234′;4、插入列数据获取:new.colname如:new.exec_record_id5、sql查询写入变量selectcolnameintovariable如:selectverify_dateintoexecDatefromorders_executed_rec…

    2022年7月17日
    18
  • 简述方差分析_多元方差分析

    简述方差分析_多元方差分析本文介绍单因素方差分析,双因素无交互项的方差分析,双因素有交互项的方差分析,并分别附带有MATLAB代码

    2022年10月9日
    0
  • Oracle创建用户、角色、授权、建表

    Oracle创建用户、角色、授权、建表oracle数据库的权限系统分为系统权限与对象权限。系统权限(databasesystemprivilege)可以让用户执行特定的命令集。例如,createtable权限允许用户创建表,grantanyprivilege权限允许用户授予任何系统权限。对象权限(databaseobjectprivilege)可以让用户能够对各个对象进行某些操作。例如delete权限允许用

    2022年5月19日
    30
  • SPI接口总结「建议收藏」

    SPI接口总结「建议收藏」一、SPI协议【SerialPeripheralInterface】    串行外围设备接口,是一种高速全双工的通信总线。在ADC/LCD等与MCU间通信。1、SPI信号线    SPI包含4条总线,SPI总线包含4条总线,分别为SS、SCK、MOSI、MISO。(1)SS(SlaveSelect):片选信号线,当有多个SPI设备与MCU相连时,每个设备的这…

    2022年6月18日
    59
  • java内存模型_简述java内存模型

    java内存模型_简述java内存模型  什么是JMM  JMM即为JAVA内存模型(javamemorymodel)。因为在不同的硬件生产商和不同的操作系统下,内存的访问逻辑有一定的差异,结果就是当你的代码在某个系统环境下运行良好,并且线程安全,但是换了个系统就出现各种问题。Java内存模型,就是为了屏蔽系统和硬件的差异,让一套代码在不同平台下能到达相同的访问结果。JMM从java5开始的JSR-133发布后,已经…

    2022年9月4日
    3
  • windowbuilder教程_winbuilder制作pe

    windowbuilder教程_winbuilder制作pehttp://www.cnblogs.com/gladto/archive/2011/07/21/2112836.htmlhttp://hi.baidu.com/zhiqian528/item/ec1

    2022年8月2日
    4

发表回复

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

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