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


相关推荐

  • windows2003 dns 414错误「建议收藏」

    windows2003 dns 414错误「建议收藏」原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://rainbird.blog.51cto.com/211214/121697       因为原来在Linux下实现过域根dns.所以朋友也想做域名用自己的dns服务器的时候肯定是一马当先的帮着做了。操作系统这回用的是2003。用windows配置服务就一个字:“简单”。

    2022年6月11日
    55
  • C#与.NET的区别和C#程序结构

    C#与.NET的区别和C#程序结构C#语言及其特点(1)语法简洁,不允许直接操作做内存,去掉指针操作(2)彻底的面向对象设计,C#具有面向对象所应用的一切特性:封装、继承、多态(3)与Web紧密结合,C#支持绝大多数的Web标准

    2022年7月4日
    22
  • openssl生成cer证书_tls证书生成

    openssl生成cer证书_tls证书生成一安装opensslwgethttp://www.openssl.org/source/openssl-1.0.0a.tar.gztarzxvfopenssl-1.0.0a.tar.gzcdopenssl-1.0.0a./config–prefix=/usr/local/opensslmake&&makeinstall二创建主证书先创建一个ssl的目录:m…

    2026年1月27日
    3
  • Navicat8.0注册码「建议收藏」

    Navicat8.0注册码「建议收藏」姓名(Name):3ddown.com组织(Organization):3ddown.com注册码(Serial):NAVJ-W56S-3YUU-MVHV软件下载:链接:https://pan.baidu.com/s/1M7F8YFrlTVEw3aKfDPo0ZA提取码:5q3n复制这段内容后打开百度网盘手机App,操作更方便哦…

    2022年10月13日
    7
  • html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight…

    html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight…浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight发布时间:2020-07-1709:27:20来源:亿速云阅读:223作者:小猪小编这次要给大家分享的是浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这…

    2022年7月23日
    14
  • OGEngine教程:声音载入

    OGEngine教程:声音载入

    2021年12月9日
    46

发表回复

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

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