首页 Javascript 正文
184

前端跨域通信解决思路

  • yiqingpeng
  • 2019-01-07
  • 0
  •  
1、如果浏览器支持HTML5特性,那就直接使用postMessage Api,简单又好用。
如下:
http://www.B.com
//发送消息
function sendMessage(msg){
    msg = JSON.stringify(msg);
    parent.window.postMessage(msg, "*");
}

//接收消息
function onReceived(msg){
    msg = JSON.parse(msg);
    //to do
}

window.addEventListener("message", onReceived, false);
window.onload = function (){
    sendMessage({status:'ok'});
};

http://www.A.com
function sendMessage(msg){
    document.getElementById('myFrame').contentWindow.postMessage(JSON.stringify(msg), 'http://www.B.com');
}
function onReceived(msg){
    msg = JSON.parse(msg);
    //to do
}
window.addEventListener("message", onReceived, false);
window.onload = function (){
    sendMessage({status:'hi'});
};
2、如果不支持HTML5, 可以利用window.name进行消息传递。 window.name虽然不能跨域操作它,但是它有一个特性,就是其uri不管如何变化(即使刷新),window.name都不会变化。基于此,假设父页面为http://www.A.com/, 我们可以先让Frame指向http://www.B.com, 并在B加载完之后,将消息设置给B的window.name, 并跳转到http://www.A.com/empty.html页面,此时Frame与父页面属于同域,便可读取到window.name的值,从而完成消息的传递。

3、如果页面之间具有相同的父域名,那直接在脚本中指定document.domain = 'ABC.com';即可。

4、其它方式还有URL.hash方案等,但是构造消息以及解析消息都过于复杂,并且会受url长度限制,以及会影响到真实的hash,所以不作介绍。

正在加载评论...