a.html有个iframe载入b.com/login.html,当login完成时通知a.html页面登录完成并传递UserName 1.a.html 监听消息 window.addEventListener('message', function (event) { // 通过origin属性判断消息来源地址 //if (event.origin == 'http://127.0.0.1:10847') { console.log(event.data); alert(event.data+…
[转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = window.open(..)); 页面与嵌套的iframe消息传递 postMessage方法 postMessage是html5引入的API可以更方便.有效.安全的解决这些问题.postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档.多窗口.跨域消息传递. p…
window.postMessage()方法可以安全地实现Window对象之间的跨域通信.例如,在页面和嵌入其中的iframe之间. 不同页面上的脚本允许彼此访问,当且仅当它们源自的页面共享相同的协议,端口号和主机(也称为“同源策略”).window.postMessage()提供了一个受控的机制相对来安全地规避这个限制. 发送消息的基本语法: targetWindow.postMessage(message, targetOrigin, [transfer]); targetWindow就是接…
一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4.上面三个问题的跨域数据传递 postMessage() 这些问题都有一些解决办法,但html5引入的message的API可以更方便.有效.安全的解决这些难题.postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档.多窗口.跨域消息传递. postMessag…
原文:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4.上面三个问题的跨域数据传递 postMessage() 这些问题都有一些解决办法,但html5引入的message的API可以更方便.有效.安全的解决这些难题.postMessage()方法允许来自不…
仅做学习使用,原文链接:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4.上面三个问题的跨域数据传递 postMessage() 这些问题都有一些解决办法,但html5引入的message的API可以更方便.有效.安全的解决这些难题.postMessage…
效果图 postmessage解析 HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow: 其他窗口的一个引用, 比如IFRAME的contentWindow属性, 执行, window.open返回的窗口对象. message: 将要发送到其他窗口的数据. targetOrigin: 通过窗口的origin属性来指定哪些窗口能接收到…
转:https://juejin.im/post/5b8359f351882542ba1dcc31 https://juejin.im/post/590c3983ac502e006531df11 https://www.cnblogs.com/dolphinX/p/3464056.html 侵删.…
一.跨源通信概述 源:协议.端口号(https默认值433).主机域名(document.domain) 作用:向目标窗口派发MessageEvent消息(四个属性) 兼容参考 MessageEvent四个属性: 1.message(类型) 2.data(window.postMessage的第一个参数) 3.origin(调用postMessage时页面的当前状态) 4.source(调用postMessage的窗口信息) 二.postMessage语法: otherWindow.postMe…
前言 之前简单讲解了利用script标签(jsonp)以及iframe标签(window.name.location.hash)来跨域交换数据,今天我们来学习一下HTML5的api,利用postMessage来跨域交换数据.和前面一些方式交换数据方式不同的是,利用postMessage不能和服务端交换数据,只能在两个窗口(iframe)之间交换数据,废话不多说,我们直接进入实战. 实战postMessage overview 上文中说,postMessage是用于两个窗口(iframe)之间交换…