javascript如何跨域

javascript如何跨域

一、跨域详细的说明可以看下表

说明 是否允许通信
同一域名下 允许
同一域名下不同文件夹 允许
同一域名,不同端口 不允许
同一域名,不同协议 不允许
域名和域名对应ip 不允许
主域相同,子域不同 不允许
同一域名,不同二级域名 不允许
不同域名 不允许

二、javascript跨域请求数据解决方案


(1).document.domain+iframe的设置


对于主域相同而子域不同的例子,可以通过设置document.domain的办法来解决。

对于主域相同而子域不同的例子,可以通过设置document.domain的办法来解决。具体的做法是可以在两个域名的两个文件中分别加上document.domain = 主域名。然后通过a域名文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况

  • a域名文件中脚本代码如下
  •  
  •  
  • 
    document.domain = 主域名;
    var ifr = document.createElement('iframe');
    ifr.src = b域名页面;
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    ifr.onload = function(){
        var doc = ifr.contentDocument || ifr.contentWindow.document;
        
        alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
    };
    
    
    		

  • (2).动态创建Script


    虽然浏览器默认禁止了跨域访问,但并不禁止在页面中引用其他域的JS文件,并可以自由执行引入的JS文件中的function(包括操作cookie、Dom等等)。根据这一点,可以方便地通过创建script节点的方法来实现完全跨域的通信。


    (3).利用iframe和location.hash


    这个办法比较绕,但是可以解决完全跨域情况下的脚步置换问题。原理是利用location.hash来进行传值。在url#helloworld中的‘#helloworld’就是location.hash,改变hash并不会导致页面刷新,所以可以利用hash值来进行数据传递,当然数据容量是有限的。


    (4).Window.name实现的跨域数据传输


    iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。


    (5).使用HTML5 postMessage


    HTML5中最酷的新功能之一就是 跨文档消息传输Cross Document Messaging。

    调用方法

    otherWindow.postMessage(message, targetOrigin);

    方法说明

    otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性;window.open的返回值;通过name或下标从window.frames取到的值。


    message: 所要发送的数据,string类型。


    targetOrigin: 用于限制otherWindow,“*”表示不作限制

    (6).利用flash
     

    除了上面六种方式,大家平时估计都在用脚本框架开发,在JQuery框架和ExtJs框架中处理JS跨域问题,常用JSONP来处理。JSONP格式处理跨域请求,大家可以了解JSONP格式相关知识。