大大的前提:只有主域名相同的情況下方可使用此方法
什么是主域名相同呢?
huhu.com , a.huhu.com , b.a.huhu.com 這是三個不同的域名,但是主域名是相同的 都是 huhu.com, 不是這種形式的那么都不能用此方法
(一)對 huhu.com 和 a.huhu.com 這兩個域名進行測試:
1. 用 IIS 在本地搭建兩個網站,主機名當然必須設置成 huhu.com 和 a.huhu.com,此時端口設置成 80
2. 修改本地 host 文件,把剛剛建立的兩個網站指到自己的機器 IP 上,如果順利的話,此時如果你在瀏覽器里輸入 huhu.com 和 a.huhu.com 就可以訪問了
3. 在 a.huhu.com 所指的文件下邊建立 test.html 代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html</title> <script type="text/javascript" src = "jquery-1.12.1.js"></script> </head> <body> <div>A頁面</div> <iframe style = "display : none" name = "iframe1" id = "iframe" src="http://huhu.com/1.html" frameborder="0"></iframe> <script type="text/javascript"> $(function(){ try{ document.domain = "huhu.com" }catch(e){} $("#iframe").load(function(){ var jq = document.getElementById('iframe').contentWindow.$ jq.get("http://huhu.com/test.json",function(data){ console.log(data); }); }) }) </script> </body> </html>
備注:利用 iframe 加載 其他域下的文件(huhu.com/1.html), 同時 document.domain 設置成 huhu.com ,當 iframe 加載完畢后就可以獲取 huhu.com 域下的全局對象,此時嘗試着去請求 huhu.com 域名下的 test.json (此時可以請求接口),就會發現數據請求失敗了~~ 納尼!!!!!!!
數據請求失敗,目的沒有達到,自然是還少一步:
huhu.com 對應的文件夾下邊1.html 里邊代碼為:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html</title> <script type="text/javascript" src = "jquery-1.12.1.js"></script> <script type="text/javascript"> $(function(){ try{ document.domain = "huhu.com" }catch(e){} }) </script> </head> <body> <div id = "div1">B頁面</div> </body> </html>
此時在進行刷新瀏覽器,就會發現數據這次真的是成功了~~~~~
(二)對 a.huhu.com 和 b.huhu.com 這兩個域名進行測試:
測試方法跟上邊是一樣的,只不過區別就是 請求域名發生變化,此時,嘗試着修改 document.domain 值為 "huhu.com",此時刷新瀏覽器發現會報錯 跨域了, 納尼尼尼尼!!! 再進行測試.....
(三)對 a.huhu.com 和 b.a.huhu.com 這兩個域名進行測試:
此時,嘗試着修改 document.domain 值為 "a.huhu.com", 此時刷新瀏覽器發現數據讀取成功
好吧! 難道結論是 同級別的子域名之間使用此方法是不能達到跨域的目的,存在父子級別關系的域名之間,而且是子域名去加載調用父域名的情況下,此方法完全ok?
如有錯誤,歡迎留言指出~~~