通過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.html與qq.html利用JS改成同一個域的。因為它們的一級域名不相等。(強制用JS將它們改成相等的域的話會報跟上面一樣的”引數無效錯誤。”)
但如果在baidu.html
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>