跨域[document.domain+iframe]


大大的前提:只有主域名相同的情況下方可使用此方法

什么是主域名相同呢?

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?

如有錯誤,歡迎留言指出~~~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM