window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),

端口号(443为https的默认值),以及主机  (两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信。window.postMessage() 

方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全.

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

otherWindow:

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

  • Window.open
  • Window.opener
  • HTMLIFrameElement.contentWindow(父窗体向子窗体发送消息)
  • Window.parent(子窗体向父窗体发送消息)
  • Window.frames +索引值
 

message:

将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。

targetOrigin:

通过窗口的origin属性来指定哪些窗口能接收到消息事件,其值可以是字符串"*"(表示无限制)或者一个URI。在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送;只有三者完全匹配,消息才会被发送。这个机制用来控制消息可以发送到哪些窗口;例如,当用postMessage传送密码时,这个参数就显得尤为重要,必须保证它的值与这条包含密码的信息的预期接受者的origin属性完全一致,来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口,那么请始终提供一个有确切值的targetOrigin,而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。

transfer :

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

window.addEventListener("message",function (event){
//do something
, false); 

event对象有三个属性,分别是origin,data和source。
event.data表示接收到的消息;
event.origin表示postMessage的发送来源,包括协议,域名和端口;
event.source表示发送消息的窗口对象的引用; 
 

示例:

A页面中包含一个iframe,iframe加载B页面(父窗体与子窗体通信)

A页面代码:

window.addEventListener('message', function(e) {
  if (e.data.test=="Test") {
    alert(e.data.test);
  }
}, false);

B页面代码:   btnClick: function (o, e) {
  window.parent.postMessage({ test: "Test"}, "*");

  //{ test: "Test" }为data属性,"*" 为origin属性

}

A页面中包含一个iframe,iframe加载B页面(子窗体与父窗体通信)

A页面代码:

function btnClick(o, e) {
document.getElementById("iframeContent").contentWindow.postMessage({ test: "Test"});
};

B页面代码:

window.addEventListener('message', function(e) {
  if (e.data.test=="Test") {
    alert(e.data.test);
  }
}, false);

window.postMessage()实现跨域消息传递的更多相关文章

  1. 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)

    在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...

  2. Html5 postMessage实现跨域消息传递

    一.同源策略 要理解跨域,我们首先要知道什么是同源策略.百度百科上这样定义同源策略:同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略, ...

  3. JavaScript 跨域:window.postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

  4. 使用window.postMessage实现跨域通信

    JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...

  5. 利用HTML5的window.postMessage实现跨域通信

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77   HTML5的window.postMessage简述 postM ...

  6. postMessage 实现跨域消息传递 (JS)

    简单记录一下 postMessage ,证明我来过, 我搞过(frame框架), 以后还能有个解决方法好去度娘: 1.发送消息 postMessage('test', 'http://localhos ...

  7. html5 postMessage解决跨域、跨窗口消息传递

    一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4. ...

  8. html5 postMessage解决跨域、跨窗口消息传递[转载]

    原文:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1 ...

  9. html5 postMessage解决跨域、跨窗口消息传递(转)

    仅做学习使用,原文链接:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经 ...

随机推荐

  1. [20190505]ts 命令在哪里.txt

    [20190505]ts 命令在哪里.txt --//在论坛问一下ts命令在哪里?没人解答,自己也google看了一下:https://unix.stackexchange.com/questions ...

  2. PHP扩展使用-CURL

    一.简介 功能:是一个可以使用URL的语法模拟浏览器来传输数据的工具库,支持的协议http.https.ftp.gopher.telnet.dict.file.ldap 资源类型:cURL 句柄和 c ...

  3. NVIDIA-SMI参数解析

    第一栏的Fan:N/A是风扇转速,从0到100%之间变动,这个速度是计算机期望的风扇转速,实际情况下如果风扇堵转,可能打不到显示的转速.有的设备不会返回转速,因为它不依赖风扇冷却而是通过其他外设保持低 ...

  4. super与this用法

    super注意点: 1.当super调用父类的构造方法,必须在构造方法的第一个: 2.super必须只能出现在子类的方法或者构造方法中: 3.super和this不能同时调用构造方法: 4.super ...

  5. SpringMVC Junit Demo

    package com.zchx.test; import org.apache.logging.log4j.LogManager; import org.apache.logging.log4j.L ...

  6. IDEA结合Maven的profile构建不同开发环境(SpringBoot)

    一.概述 在开发过程中,我们的项目会存在不同的开发环境,比如开发环境.生产环境.测试环境,而我们的项目在不同的环境中有些配置也是不一样的,比如数据源配置.日志文件配置等,假如我们每次将软件部署到不同的 ...

  7. 201871010110-李华《面向对象程序设计(java)》第十一周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  8. mac pro下安装安装 SymPy 和 matplotlib报错解决方案

    因为自己写python分析时候要用到这两个库,但是mac 上安装不成功.原来是要安装原来装 matplotlib 之前先要安装 freetyp 和 libpng. brew install freet ...

  9. NeuHub图像垃圾分类api和百度图像识别api

    京东 NeuHub图像垃圾分类申请:http://neuhub.jd.com/gwtest/init/242 文档:https://aidoc.jd.com/image/garbageClassifi ...

  10. 利用Tengine在树莓派上跑深度学习网络

    树莓派是国内比较流行的一款卡片式计算机,但是受限于其硬件配置,用树莓派玩深度学习似乎有些艰难.最近OPENAI为嵌入式设备推出了一款AI框架Tengine,其对于配置的要求相比传统框架降低了很多,我尝 ...