zoukankan      html  css  js  c++  java
  • PHP下ajax跨子域的解决方案之document.domain+iframe

    对于主域相同,子域不同,我们可以设置相同的document.domain来欺骗浏览器,达到跨子域的效果。
     
    例如:我们有两个域名:www.a.com 和 img.a.com
    在www.a.com下有a.html
    在img.a.com下有img.json和img.html这两个文件。
     
    img.json就是一些我们要获取的数据:
    [
        {
            "name" : "img1",
            "url" : "http://img.a.com/img1.jpg"
        },
        {
            "name" : "img2",
            "url" : "http://img.a.com/img2.jpg"
        }
    ]
    
    img.html就是我们iframe要引用的:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
    </head>
    <body>
    <script src="./jquery.js"></script>
    <script type="text/javascript">
        document.domain = "a.com";
    		
        var p = parent.window.$;
        p("#sub").text("我是子页面添加的");
    </script>
    </body>
    </html>
    
    a.html就是要通过跨子域获取数据的页面:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
    </head>
    <body>
    <!-- 通过跨域获取数据,并添加到ul中 -->
    <ul id="data"></ul>
    
    <!-- 子页面通过parent.window来访问父页面 -->
    <div id="sub"></div>
        
    <!-- 通过iframe引用img.a.com下的img.html -->
    <iframe id="iframe" src="http://img.a.com/img.html"></iframe>
        
    <script src="./jquery.js"></script>
    <script type="text/javascript">
    document.domain = "a.com";
    
    $("#iframe").bind("load", function() {
        //获取子页面的jquery对象
        iframe = document.getElementById("iframe").contentWindow.$;
    	
        iframe.getJSON("http://img.a.com/img.json", function(data) {
            var con = "";
            //注意这里的$对象是www.a.com上的
            $.each(data, function(i, v) {
                con += "<li>" + v.name + ":" + v.url + "</li>";
            });
            $("#data").html(con);
        });
    });
    </script>
    </body>
    </html>
    
    a.html中我们通过contentWindow.$来获取子页面的jquery对象,然后通过getJSON获取数据,并通过www.a.com上的$对象把数据写入到ul中。
     
    在子页面img.html中我们通过parent.window来访问父页面的$对象,并操作元素添加数据。
  • 相关阅读:
    Spring MVC3 + Ehcache 缓存实现
    DB2导入导出数据库数据
    JS、ActiveXObject、Scripting.FileSystemObject
    new ActiveXObject("Scripting.FileSystemObject") 时抛出异常 .
    各种浏览器的内核是什么
    Content-Type: application/vnd.ms-excel">
    常用jar包用途
    nutz的json视图
    Nutz中那些好用的工具类
    The JSP specification requires that an attribute name is preceded by whitespace
  • 原文地址:https://www.cnblogs.com/jkko123/p/6294623.html
Copyright © 2011-2022 走看看