1. 程式人生 > >通過document.domain + iframe解決跨域問題

通過document.domain + iframe解決跨域問題

document.domain用來得到當前網頁的域名。

alert(document.domain);              //"www.baidu.com"

我們也可以給document.domain屬性賦值,不過是有限制的,你只能賦成當前的域名或者一級域名。
比如:

alert(document.domain = "baidu.com");     //"baidu.com"
alert(document.domain = "www.baidu.com"); //"www.baidu.com"

上面的賦值都是成功的,因為www.baidu.com是當前的域名,而baidu.com是一級域名。

但是下面的賦值就會出來”引數無效”的錯誤:
比如:

alert(document.domain = "qq.com");     //引數無效  報錯
alert(document.domain = "www.qq.com"); //引數無效  報錯

因為qq.com與baidu.com的一級域名不相同,所以會有錯誤出現。
這是為了防止有人惡意修改document.domain來實現跨域偷取資料。

利用document.domain 實現跨域

前提條件:
這兩個域名必須屬於同一個一級域名!而且所用的協議,埠都要一致,否則無法利用document.domain進行跨域。


Javascript出於對安全性的考慮,而禁止兩個或者多個不同域的頁面進行互相操作。
而相同域的頁面在相互操作的時候不會有任何問題。

1.比如:
baidu.com的一個網頁(baidu.html)裡面 利用iframe引入了一個qq.com裡的一個網頁(qq.html)。

這時在baidu.html裡面可以看到qq.html裡的內容,但是卻不能利用javascript來操作它。因為這兩個頁面屬於不同的域,在操作之前,js會檢測兩個頁面的域是否相等,如果相等,就允許其操作,如果不相等,就會拒絕操作。
這裡不可能把baidu.htmlqq.html利用JS改成同一個域的。因為它們的一級域名不相等。(強制用JS將它們改成相等的域的話會報跟上面一樣的”引數無效錯誤。”)
但如果在baidu.html

裡引入baidu.com裡的另一個網頁,是不會有這個問題的,因為域相等。

2.另一種情況,有兩個子域名:
news.baidu.com(news.html)
map.baidu.com(map.html)
news.baidu.com裡的一個網頁(news.html)引入了map.baidu.com裡的一個網頁(map.html)

這時news.html裡同樣是不能操作map.html裡面的內容的。
因為document.domain不一樣,一個是news.baidu.com,另一個是map.baidu.com。
這時我們就可以通過Javascript,將兩個頁面的domain改成一樣的,
需要在a.html裡與b.html裡都加入:

document.domain = “baidu.com”;

這樣這兩個頁面就可以互相操作了。也就是實現了同一一級域名之間的”跨域”。

舉個栗子

news.baidu.com下的news.html頁面:

<script>
    document.domain = 'baidu.com';
    var ifr = document.createElement('iframe');
    ifr.src = 'map.baidu.com/map.html';
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    ifr.onload = function(){
        var doc = ifr.contentDocument || ifr.contentWindow.document;
        // 這裡可以操作map.baidu.com下的map.html頁面
        var oUl = doc.getElementById('ul1');
        alert(oUl.innerHTML);
        ifr.onload = null;
    };
</script>

map.baidu.com下的map.html頁面:

<ul id="ul1">我是map.baidu.com中的ul</ul>
<script>
    document.domain = 'baidu.com';
</script>