对于主域相同,子域不同,我们可以设置相同的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. 2018ICPC网络赛(徐州站)A题题解

    一.题目链接 https://nanti.jisuanke.com/t/31453 二.题意 给定$N$个位置,$2^k$种颜色,让你去涂色,条件是相邻的两种颜色类型异或值的二进制表示不全为$1$(以 ...

  2. Effect

    /////////////////////////////////shader source/////////////////////////////////Texture2D colorMap : ...

  3. 深入分析Java Web技术内幕 修订版 pdf

    百度网盘:http://pan.baidu.com/s/1slHCCw9

  4. selenium+python自动化96-执行jquery报:$ is not defined

    前言 背景介绍:做wap页面自动化的时候,把url地址直接输入到浏览器(chrome浏览器有手机wap模式)上测试,有个按钮死活点不到,用wap模式的触摸事件也无法解决,后来想用jquery去执行点击 ...

  5. 通过cookie验证用户登录

    # cookie # cookie# 当你在浏览器登陆时,浏览器记录这个登录信息(服务器响应时发送请求的数据和登录信息),再次访问时 浏览器会将访问请求和缓存的登录信息都发送到服务器, # 服务器通过 ...

  6. html-文本属性

    1.文本标记线 text-decoration: 下划线-underline 删除线-line-through 上划线-overline 2.文本大小写 text-transform 默认值none ...

  7. idea 安装 破解方法

    参考:https://blog.csdn.net/qq_27686779/article/details/78870816 (1)下载破解补丁 把下载的破解补丁放在你的idea的安装目录下的bin的目 ...

  8. leetcode166

    public class Solution { public String fractionToDecimal(int numerator, int denominator) { HashMap< ...

  9. 5.log4j报错

    java.lang.UnsupportedClassVersionError: org/apache/log4j/Logger : Unsupported major.minor version 51 ...

  10. JS吧数字转成2进制 8进制16进制数据

    ; number.toString(); //转成2进制 number.toString();//转成8进制 number.toString();//转成10进制 number.toString(); ...