js中跨域問題

1、什麼叫作js跨域

javascript爲了安全着想，在ajax以及iframe中不容許跨域調用。

2、哪些狀況算做跨域

1.協議名稱不一樣

     從http://www.test.com中調用https://www.test.com

2.端口不一樣

     從http://www.test.com調用http://www.test.com:9999

3.域名不一樣 

   從http://www.test.com調用http://login.test.com

  從http://www.test.com調用http://www.test2.com

3、如何解決js跨域

1.使用jsonp

        在js中，咱們直接用XMLHttpRequest請求不一樣域上的數據時，是不能夠的。可是，在頁面上引入不一樣域上的js腳本文件倒是能夠的，jsonp正是利用這個特性來實現的。 例如：

<script type="text/javascript">
    function dosomething(jsondata){
        //處理得到的json數據
    }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

   

jsonp就是回調函數+數據。callback({"name":"Tom"})典型的jsonp。js文件載入成功後會執行咱們在url參數中指定的函數，而且會把咱們須要的json數據做爲參數傳入。

若是你的頁面使用jquery，那麼經過它封裝的方法就能很方便的來進行jsonp操做了。

<script type="text/javascript">
    $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){
        //處理得到的json數據
    });
</script>

jquery會自動生成一個全局函數來替換callback=?中的問號，以後獲取到數據後又會自動銷燬，實際上就是起一個臨時代理函數的做用。$.getJSON方法會自動判斷是否跨域，不跨域的話，就調用普通的ajax方法；跨域的話，則會以異步加載js文件的形式來調用jsonp的回調函數。

   優勢：原生支持，比較老的遊覽器也都支持。缺點：只支持GET方式，不支持POST方式

2.CORS方式

經過修改document.domain來跨子域

document.domain的設置是有限制的，咱們只能把document.domain設置成自身或更高一級的父域，且主域必須相同。

1.在頁面 http://www.example.com/a.html 中設置document.domain:

<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>
<script type="text/javascript">
    document.domain = 'example.com';//設置成主域
    function test(){
        alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 對象
    }
</script>

2.在頁面 http://example.com/b.html 中也設置document.domain:

<script type="text/javascript">
    document.domain = 'example.com';//在iframe載入這個頁面也設置document.domain，使之與主頁面的document.domain相同
</script>

修改document.domain的方法只適用於不一樣子域的框架間的交互。

使用window.name來進行跨域

window對象有個name屬性，該屬性有個特徵：即在一個窗口(window)的生命週期內,窗口載入的全部的頁面都是共享一個window.name的，每一個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的全部頁面中的

使用HTML5的window.postMessage方法跨域

window.postMessage(message,targetOrigin) 方法是html5新引進的特性，可使用它來向其它的window對象發送消息，不管這個window對象是屬於同源或不一樣源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經支持window.postMessage方法。