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

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

转载作者：qq735679552 更新时间：2022-09-29 22:32:09

43

4

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章PHP ajax跨子域的解决方案之document.domain+iframe实例分析由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例讲述了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来访问父页面的$对象，并操作元素添加数据.

希望本文所述对大家PHP程序设计有所帮助.

原文链接：https://www.cnblogs.com/jkko123/p/6294623.html 。

最后此篇关于PHP ajax跨子域的解决方案之document.domain+iframe实例分析的文章就讲到这里了,如果你想了解更多关于PHP ajax跨子域的解决方案之document.domain+iframe实例分析的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

43

4

0

文章推荐： PHP下ajax跨域的解决方案之window.name实例分析

文章推荐：带你了解如何用C++合并两个有序链表

文章推荐： python全栈要学什么 python全栈学习路线

文章推荐： PHP下ajax跨域的解决方案之jsonp实例分析

javascript - 为什么 document.body.offsetHeight + document.body.bottomMargin 不等于 document.documentElement.offsetHeight
我正在尝试计算 iFrame 的高度，但不明白为什么 document.body.offsetHeight + document.body.bottomMargin 不等于 document.docu
node.js - Mongoose JS : Create a reference in one document to an embedded document in another document
我正在使用 Node/Mongoose/MongoDB 并尝试构建一个轮询应用程序。一个关键需求是跟踪单个用户对同一民意调查的响应如何随时间变化(他们一遍又一遍地进行同一民意调查)。我有一个用户模型
javascript - 如何根据 Microsoft CRM 代码审查在 HTML Webresouce 中使用 javascript document.createElement、document.body、$(document)？
首先，我不是普通的博主，我很困惑。如果我的问题不符合要求，请指导我。我会努力改进的。我已提交 Microsoft Code Review 的 Microsoft CRM 插件。我是 JavaScri
Powershell 'Documents' 或 'My Documents'
谁能解释为什么使用类似的东西: gci -force "\\computername\c$\users\username\Documents" -recurse 或者 gci -force "\\co
document - Microsoft Document Explorer 2008有什么用途？
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, over
javascript - 什么是 `(function(document) { ... }(document));`
这个问题已经有答案了: What is the (function() { } )() construct in JavaScript? (28 个回答) 已关闭 6 年前。说实话，一开始我以为我可
javascript - document.getElementsByTagName ("*") 或 document.all
document.getElementsByTagName("*") 适用于 IE/Firefox/Opera，但不适用于 Chrome 和 Safari。 document.all 适用于 IE/C
javascript - Document 和 document 和有什么不一样？
这个问题在这里已经有了答案: What is the difference between Document and document in JavaScript? (2 个答案) 关闭 8 年前。
javascript - document.addEventListener 与 $(document).on
我以某种方式发现将事件监听器添加到文档的行为有点奇怪。虽然向 HTMLElements 添加监听器工作正常，但向文档添加监听器不起作用。但奇怪的是，使用 jQuery 可以让它工作。那么有人可以解释
javascript - document.documentElement 与 document.all
谁能告诉我这两个 JavaScript 命令之间的区别？这两个跨主要浏览器的兼容性是什么？我知道 documentElement 与大多数浏览器兼容。谢谢最佳答案 document.docume
javascript - document.all 与 document.getElementById
什么时候应该使用 document.all 与 document.getElementById？最佳答案 document.all 是 Microsoft 对 W3C 标准的专有扩展。 getEle
react-native-document-picker : Type error-->undefined document picker while calling document picker. 在 react native 0.61.2 中显示
当升级到 react-native 0.61.2 时，这个问题出现了。我做到了从手机中删除了 apk 和自动链接使用 react-native link 然后 react-native run-and
react-native-document-picker : Type error-->undefined document picker while calling document picker. 在 react native 0.61.2 中显示
当升级到 react-native 0.61.2 时，这个问题出现了。我做到了从手机中删除了 apk 和自动链接使用 react-native link 然后 react-native run-and
websocket - 如何将Vec 转换为bson::document::Document？
我将收到 tungstenite::Message ，它将包含来自客户端的bson文档。我可以将tungstenite::Message转换为Vec，但是如何在服务器端将其转换回 bson::docu
javascript - document 和 document.cookie 之间的范围差异
我这里有一个简单的疑问: 文档对象范围位于浏览器选项卡内:我的意思是如果我设置document.tab1 ='tab1' 在一个浏览器选项卡中它在其他选项卡中不可用。但是 document.coo
javascript - document.head, document.body 附加脚本
我经常使用并看到推荐的 dom 访问结构，例如这样动态地将内容添加到页面: loader = document.createElement('script'); loader.src = "myurl
jquery - 如何用 $(document).on() 替换 $(document).ready()
我对 JQuery 还很陌生。我正在使用this JQuery 函数在元素上显示工具提示。我根据我的需要(在这个社区的帮助下)以这种方式编辑了代码: $(document).ready(functi
javascript - document.ready 与 document.onLoad
我想知道哪个是运行js代码的正确方法，该代码根据窗口高度计算垂直菜单的高度并按时设置，不晚不早。我正在使用 document.ready 但它并没有真正帮助我解决这个问题，它有时没有设置，我必须重新
javascript document.all 和 document.all.id_name 代表
我正在浏览一个 js 文件并发现这个声明var dataobj=document.all? document.all.id_name : document.getElementById("id_nam
javascript - 何时使用 if (document.all&&document.getElementById) 条件
想知道何时使用，这适用于什么浏览器？ if (document.all&&document.getElementById) { // Some code block } 最佳答案我认为没有任何重要的

首页

博学

6Ren·AI

商城

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