http://www.bianceng.cn/a/2014/0316/40036.htm
跨域访问的解决方案(HTML 5的方法:postMessage) 关于跨域访问,使用JSONP的方法,我前面已经demo过了,具体见http://supercharles888.blog.51cto.com/609344/856886,HTML5提供了一个非常强大的API,叫postMessage,它其实就是以前iframe的进化版本,使用起来极其方便,这里举个实验例子: 我们依旧按照与上文相同的设定,假定我们有2个Domain Domain1: http://localhost:8080 它上面有个应用叫HTMLDomain1,并且有个页面叫sender.html。 Domain2:http://localhost:8180 它上面有个应用叫HTMLDomain2,并且有个页面叫receiver.html。 我现在的需求是,假定Domain1上我们有个json数据,我们想让Domain2应用中的javascript要可以操作这个json 数据(注意,这里已经是跨域了,因为Domain2上的js操作了Domain1上的数据),应该怎么办呢? 解决方案就是用HTML5的postMessage方法 Domain2的代码: 首先,我们在Domain2上创建一个HTML页面,这个页面没什么内容,就一行文字会来标识它是Domain 2,它下方将来会被js用来填充从Domain1弄过来的数据。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Domain2上的接收者页面receiver.html</title> <script type="text/javascript" src="js/receiveInfo.js"></script> </head> <body οnlοad="receiveInfoFromAnotherDomain();"> <p>这个页面是HTML5跨域访问的Domain2上的页面receiver.html,它会处理来自Domain1上sender.html发送的页面</p> </body> </html> Domain2页面加载时候,它会调用receiveInfoFromAnotherDomain()函数,这个函数首先定义了一个事件监听函数,它只接受来自Domain1(http://localhost:8080)的事件,否则就忽略掉,然后它从这个事件中分离出信息负载,也就是json 数据,然后显示在页面底部: //这个函数用于处理从Domain1上的sender发送过来的信息,然后将他们打印出来 function receiveInfoFromAnotherDomain(){ console.log("entering method receiveInfoFromAnotherDomain()"); //首先让window添加一个事件监听函数,表明它可以监听窗口对象的message事件 //它受到事件时,会先判断是否来自指定的Domain(不是所有Domain丢过来的事件它都处理的) window.addEventListener("message",function(ev){ console.log("the receiver callback func has been invoked"); //如果不是来自指定Domain的,则忽略 if(ev.origin !="http://localhost:8080"){ console.log("the event doesn't come from Domain1!"); return; } //现在可以处理数据了 //控制台打印出接收到的json数据,因为我们把json字符串发送了过来 console.log(ev.data); //将json字符串转为json对象,然后从中分离出原始信息 var personInfoJSON = JSON.parse(ev.data); var name = personInfoJSON.name; var title = personInfoJSON.title; var info = personInfoJSON.info; //构造信息文本并且显示在页面的底部 var personInfoString="从域为: "+ev.origin+"那里传来的数据."+"<br>"; personInfoString+="姓名是: "+name+"<br>"; personInfoString+="头衔为: "+title+"<br>"; personInfoString+="信息为: "+info+"<br>"; document.body.innerHTML=personInfoString; } ); }