由于同源策略的限制，Javascript存在跨域通信的问题，典型的跨域问题有iframe与父级的通信等。 常规的几种解决方法： (1) document.domain+iframe；(2) 动态创建script； (3) iframe+location.hash； (4) flash。 这里不细说这几种方法，记录的是HTML5的window.postMessage。postMessage兼容IE8+、Firefox、Opera、Safari、Chrome。 需要两个异域的服务器来做测试，当然也可以用本地和线上服务器作为两个异域的服务器。假如使用pho...
一、同源策略要理解跨域，我们首先要知道什么是同源策略。百度百科上这样定义同源策略：同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。何谓同源：如果两个URL的域名、协议、端口相同，则表示他们同源。浏览器的同源策略，限制了来自不同源的"document"或脚本...
postMessagePortal.html 页面代码代码如下:标题 var targetOrigin = "http://22527.vhost20.boxcdn.cn"; var defaultTitle = "Portal";var notificationTimer = null; function messageHandler(e) { if (e.origin == targetOrigin) { notify(e.data); } else { // ignore messages from other origins }} function sendString(s) { document.getElementById("widget").contentWindow.postMessage(s, tar...
背景：由于同源策略存在，javascript的跨域一直都是一个棘手的问题。 父页面无法直接获取iframe内部的跨域资源；同时，iframe内部的跨域资源也无法将信息直接传递给父页面 。 一：传统的解决方式。 传统的iframe资源解决方式：主要通过通过中间页面代理，此处不再赘述，参考 中间页获取跨域iframe 二：html5 postMessage的产生 随着HTML5的发展，html5工作组提供了两个重要的接口： postMessage(send) 和 onme...
平时做web开发的时候关于消息传递，除了客户端与服务器传值还有几个经常会遇到的问题1.页面和其打开的新窗口的数据传递2.多窗口之间消息传递3.页面与嵌套的iframe消息传递4.上面三个问题的跨域数据传递这些问题都有一些解决办法，但html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。 postMessage(data...
有没有什么好的工具可以让开发人员正确调试在postMessage之间发送的消息？ 或者也许是Firebug的插件？解决方法:Firebug (as of 1.11 beta 1)通过monitorEvents()支持此功能.你可以这样做：$("iframe").each(function(i, e) {console.log("Monitoring messages sent to: iframe(" + i + ")#" + $(this).attr("id"));monitorEvents(this.contentWindow, "message"); // Send a test message to this iframethis.contentWindow.postMe...
我们知道对窗口间通信施加的跨域限制以及在HTML5中引入postMessage. 但是,我们想知道iFrame是否还有其他方法可以调用其父窗口中定义的JavaScript函数. 我们发现postMessage对于调用多个方法有点笨拙,每个方法都需要多个参数. 如果不存在HTML5替代方案,则可以在PhoneGap中提供解决方案. PhoneGap详细信息： 我们在PhoneGap“index.html”页面中嵌入了一个iFrame. 从“index.html”,我们可以在iFrame中调用JavaScript函数或访问变量....