跨域[document.domain+iframe]

最新推荐文章于 2023-11-11 14:19:29 发布

weixin_30438813

最新推荐文章于 2023-11-11 14:19:29 发布

阅读量134

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/huhulove/p/5923839.html

版权

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

什么是主域名相同呢？

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？

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

转载于:https://www.cnblogs.com/huhulove/p/5923839.html