对于主域相同,子域不同,我们可以设置相同的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下ajax跨子域的解决方案之document.domain+iframe的更多相关文章

  1. PHP下ajax跨域的解决方案之window.name

    原理核心:window对象的name属性是一个很特别的属性,当该window的location变化,然后重新加载,它的name属性可以依然保持不变. 依此原理,我们可以在页面A中用iframe加载其他 ...

  2. PHP下ajax跨域的解决方案之jsonp

    首先要说明一下json和jsonp的区别? json是一种基于文本的数据交换方式,或者叫做描述数据的一种格式. var person = { "name": "test& ...

  3. PHP下ajax跨域的解决方案之CORS

    由于安全的限制(同源策略,javascript只能访问同域名下的内容),如果需要进行跨域操作,那就免不了要进行跨域.   CORS(跨域资源共享,Cross-Origin Resource Shari ...

  4. ie8或9下ajax跨域问题

    ie8或9下ajax跨域支持,添加如下代码 <!--[if (IE 8)|(IE 9)]><script src="https://cdn.bootcss.com/jque ...

  5. java、ajax 跨域请求解决方案('Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.)

      1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...

  6. ajax跨域的解决方案

    前言 公司要做一个活动页面,在其过程中发现所有的接口,ajax请求跨域.这里对跨域做个简单介绍以及提供几种解决办法. 由于浏览器实现的同源策略的限制,XmlHttpRequest只允许请求当前源(域名 ...

  7. 【JS】AJAX跨域-JSONP解决方案(一)

    AJAX跨域介绍 AJAX 跨域访问是用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面 由于安全方面的原因, 客户端js使用xmlhttprequest只能用来向来源网站发送请求 ...

  8. ajax跨域问题解决方案

    今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面 ...

  9. iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

随机推荐

  1. php 编程笔记分享

    php获取POST数据的三种方法php 图片加水印源代码php+ajax+json的一个最简单实例php 汉字转拼音源码php遍历目录,生成目录下每个文件的md5值并写入到结果文件中php实现linu ...

  2. Linux--多网卡的7种Bond模式和交换机配置

    网卡bond是通过把多张网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡.在应用部署中是一种常用的技术,我们公司基本所有的项目相关服务器都做了bond,这里总结整理,以便待查. bond ...

  3. Helm 入门安装指南

    Helm 是 Kubernetes 生态系统中的一个软件包管理工具.本文将介绍 Helm 中的相关概念和基本工作原理,并通过一个具体的示例学习如何使用 Helm 打包.分发.安装.升级及回退 Kube ...

  4. MYSQL体系结构-来自期刊

    MySQL三层体系结构 |-----------------------------------------------------------------------------------| | ...

  5. 最小生成树-kruskal

    kruskal算法,没有进行算法复杂度分析 判断俩个结点是否在同一个树上使用了dfs,比较low的写法 输入数据 //第一行,结点数,结点数,边数 9 9 14a b 4b c 8c d 7a h 8 ...

  6. HTML 标签元素的 align 属性

    align 属性规定段落中文本的对齐方式. 有 left  right center  justify 这些参数 left  right center  就是左对齐 右对齐 中间对齐 justify  ...

  7. JS转义解码方法

    之前只知道可以解决传值乱码问题,今天刚好看到,从新补充下: JavaScript中有三个可以对字符串编码的函数,分别是: 转义方法: escape();//函数可对字符串进行编码 encodeURI( ...

  8. ajax 遍历json一维数组

    $.each(data,function(index,value){}data必须是Object类型index是数组的下标value可以是一个对象 function myonclick() { var ...

  9. 前端-CSS-9-文本和字体-背景颜色

    字体属性 div{ width: 300px; height: 100px; /*background-color: red;*/ border: 1px solid red; /*设置字体大小 px ...

  10. gulp 用法 小结

    前端们,gulp该用起来了,简单的demo入门 gulp.grunt前端自动化工具,只有用过才知道多么重要. 作者:一文不提来源:博客园|2015-05-28 10:35 移动端 收藏 分享 gulp ...