当前位置：首页 > PHP教程 > php高级应用 > 列表

PHP ajax跨子域的解决方案之document.domain+iframe实例分析

发布:smiling　来源: PHP粉丝网 　添加日期：2022-02-18 16:34:34　浏览: 评论：0　

本文实例讲述了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就是一些我们要获取的数据：

  1. [ 
  2.   { 
  3.     "name" : "img1", 
  4.     "url" : "http://img.a.com/img1.jpg" 
  5.   }, 
  6.   { 
  7.     "name" : "img2", 
  8.     "url" : "http://img.a.com/img2.jpg" 
  9.   } 
  10. ] 

img.html就是我们iframe要引用的：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>Insert title here</title> 
  6. </head> 
  7. <body> 
  8. <script src="./jquery.js"></script> 
  9. <script type="text/javascript"> 
  10.   document.domain = "a.com"; 
  11.  
  12.   var p = parent.window.$; 
  13.   p("#sub").text("我是子页面添加的"); 
  14. </script> 
  15. </body> 
  16. </html> 

a.html就是要通过跨子域获取数据的页面：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>Insert title here</title> 
  6. </head> 
  7. <body> 
  8. <!-- 通过跨域获取数据，并添加到ul中 --> 
  9. <ul id="data"></ul> 
  10.  
  11. <!-- 子页面通过parent.window来访问父页面 --> 
  12. <div id="sub"></div> 
  13.  
  14. <!-- 通过iframe引用img.a.com下的img.html --> 
  15. <iframe id="iframe" src="http://img.a.com/img.html"></iframe> 
  16.  
  17. <script src="./jquery.js"></script> 
  18. <script type="text/javascript"> 
  19. document.domain = "a.com"; 
  20.  
  21. $("#iframe").bind("load", function() { 
  22.   //获取子页面的jquery对象 
  23.   iframe = document.getElementById("iframe").contentWindow.$; 
  24.  
  25.   iframe.getJSON("http://img.a.com/img.json", function(data) { 
  26.     var con = ""; 
  27.     //注意这里的$对象是www.a.com上的 
  28.     $.each(data, function(i, v) { 
  29.       con += "<li>" + v.name + ":" + v.url + "</li>"; 
  30.     }); 
  31.     $("#data").html(con); 
  32.   }); 
  33. }); 
  34. </script> 
  35. </body> 
  36. </html> 
  37. <!DOCTYPE html> 
  38. <html> 
  39. <head> 
  40.   <meta charset="UTF-8"> 
  41.   <title>Insert title here</title> 
  42. </head> 
  43. <body> 
  44. <!-- 通过跨域获取数据，并添加到ul中 --> 
  45. <ul id="data"></ul> 
  46.  
  47. <!-- 子页面通过parent.window来访问父页面 --> 
  48. <div id="sub"></div> 
  49.  
  50. <!-- 通过iframe引用img.a.com下的img.html --> 
  51. <iframe id="iframe" src="http://img.a.com/img.html"></iframe> 
  52.  
  53. <script src="./jquery.js"></script> 
  54. <script type="text/javascript"> 
  55. document.domain = "a.com"; 
  56.  
  57. $("#iframe").bind("load", function() { 
  58.   //获取子页面的jquery对象 
  59.   iframe = document.getElementById("iframe").contentWindow.$; 
  60.  
  61.   iframe.getJSON("http://img.a.com/img.json", function(data) { 
  62.     var con = ""; 
  63.     //注意这里的$对象是www.a.com上的 
  64.     $.each(data, function(i, v) { 
  65.       con += "<li>" + v.name + ":" + v.url + "</li>"; 
  66.     }); 
  67.     $("#data").html(con); 
  68.   }); 
  69. }); 
  70. </script> 
  71. </body> 
  72. </html> 

a.html中我们通过contentWindow.$来获取子页面的jquery对象，然后通过getJSON获取数据，并通过www.a.com上的$对象把数据写入到ul中。

在子页面img.html中我们通过parent.window来访问父页面的$对象，并操作元素添加数据。

Tags: ajax跨子域 document.domain+iframe

分享到：

推荐文章

热门文章

最新评论文章