跨域[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?

如有错误,欢迎留言指出~~~

 

posted @ 2016-09-30 15:05  记忆城主  阅读(4819)  评论(0编辑  收藏  举报