站内AJAX跨域可以通过document.domain和iframe实现，比如www.css88.com、js.css88.com、css88.com这3个域名其实是3个不同的域，很多时候www.css88.com和css88.com打开的可能是用一个页面，但是，他们确实是不同的域，比如www.css88.com的页面通过ajax无法直接获取css88.com域下的数据，这是由于js的安全性引起的。

不过我们可以通过document.domain和iframe实现在站内的ajax跨域。

查看demo：http://www.css88.com/demo/iframe-domain/

还有一点要注意，这个方法需要在iframe加载后才能使用！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>使用document.domain和iframe实现站内AJAX跨域</title>

<script type="text/javascript" src="http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></script>

</script>

</head>

<body>

	<div id="test"></div>

    <!--<iframe src="http://css88.com/demo/domain/iframe.html" id="iframe" style="display:none;"></iframe>-->

<script type="text/javascript">

//document.write(document.domain)

document.domain = "css88.com";

var createAjaxIframe={

	appIframe: function(iframeId, iframeSrc){

		var iframe = document.createElement("iframe");

		iframe.src = iframeSrc// "http://css88.com/demo/domain/iframe.html";

		iframe.id = iframeId;

		iframe.style.display = "none";

		if (iframe.attachEvent) {

			iframe.attachEvent("onload", function(){

				createAjaxIframe.domainAjax(iframeId);

			});

		}else {

			iframe.onload = function(){

				createAjaxIframe.domainAjax(iframeId);

			};

		}

		document.body.appendChild(iframe);

	},

	domainAjax: function(iframeId){

		var iframeDom = document.getElementById(iframeId).contentWindow.$;

		iframeDom.getJSON("http://css88.com/demo/iframe-domain/city.html", function(date){

			var cityOption = "";

			for (i = 0; i < date.length; i++) {

				cityOption += date[i].c_name + "--" + date[i].c_value + "<br />"

			}

			$("#test").html(cityOption);

		});

	}

};

createAjaxIframe.appIframe("iframe","http://css88.com/demo/iframe-domain/iframe.html");

</script>

<!--统计-->

<script type="text/javascript">

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>

<script type="text/javascript">

try {

var pageTracker = _gat._getTracker("UA-3448069-1");

pageTracker._trackPageview();

} catch(err) {}</script>

</body>

</html>

　　

使用document.domain和iframe实现站内AJAX跨域的更多相关文章

  1. 用iframe设置代理解决ajax跨域请求问题

    面对ajax跨域请求的问题,想用代理的方式来解决这个跨域问题.在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到aja ...

  2. JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  3. 如何设置iframe高度自适应，在跨域的情况下能做到吗？

    在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法.在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以被自动加载. ...

  4. 【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  5. 关于ajax跨域请求（cross Domain）

    Cross Domain AJAX主要就是A.com网站的页面发出一个XMLHttpRequest,这个Request的url是B.com,这样的请求是被禁止的,浏览器处于安全考虑不允许进行跨域访问, ...

  6. iframe可通过postMessage解决跨域、跨窗口消息传递

    https://www.cnblogs.com/dorothyorsusie/p/6178599.html //iframe传参给父级页面 function give_info(){ console. ...

  7. 黄聪：利用iframe实现ajax 跨域通信的解决方案（转）

    原文:http://www.cnblogs.com/xueming/archive/2013/02/01/crossdomainajax.html 在漫长的前端开发旅途上,无可避免的会接触到ajax, ...

  8. CSS完美实现iframe高度自适应（支持跨域）

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...

  9. iframe中涉及父子页面跨域问题

    什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制.所谓同源是指相同的域名.协议和端口,只要其中一项不同就为跨域. 举几个例子: http:/ ...

随机推荐

  1. C++语言的I/o使用方法详解

    构造器 语法: fstream( const char *filename, openmode mode ); ifstream( const char *filename, openmode mod ...

  2. SQLServer数据库基本操作，导入Excel数据

    打开SQLServer客户端,连上服务端 先建立数据库,点击新建查询 基本操作如下 创建表 create table mytest ( id int primary key identity(1,1) ...

  3. Oracle索引（2）索引的修改与维护

    修改索引   利用alter index语句可以完成的操作 重建或合并索引 回收索引未使用的空间或为索引非配新空间 修改索引是否可以并行操作及并行度 修改索引的存储参数以及物理属性 指定Logging ...

  4. SpringBoot编辑代码时不重启服务

    @SpringBootApplication @ComponentScan("com.sicdt") public class SicSignWebApplication { pu ...

  5. Array排序方法sort()中的大坑

    sort() 方法用于对数组的元素进行排序. 但是排序结果就有点坑了,都不按常规出牌的: // 看上去正常的结果: ['Google', 'Apple', 'Microsoft'].sort(); / ...

  6. The Collections Module内建collections集合模块

    https://www.bilibili.com/video/av17396749/?p=12 Python函数式编程中的迭代器,生成器详解 课程内容 1.iterators are objects ...

  7. 大数据架构之:Storm

         Storm是一个免费开源.分布式.高容错的实时计算系统,Twitter开发贡献给社区的.Storm令持续不断的流计算变得容易,弥补了Hadoop批处理所不能满足的实时要求. Storm经常用 ...

  8. Ubuntu10.04下的使用使用华为E1750 3G模块

    系   统:Ubuntu 10.04 3G模块:华为E1750 1 安装usb-modeswitch软件 E1750 无线上网卡并没有提供linux环境下的驱动程序,但我们可以通过USB模式转换来让l ...

  9. 【转载】格式化存储装置成为 Ext2/Ext3/Ext4 档案系统

    格式化 用系统管理员帐户 (即 root) 身份打「mkfs -t ext2|ext3|ext4 储存装置」: mkfs -t ext3 /dev/sdb5 要格式化档案系统为 Ext2,亦可以直接使 ...

  10. [POI2008]砖块Klo

    题目 爆炸\(OJ\)机子太慢了吧实在不想打平衡树了 做法 烂大街的一个概念:求中位数 然后求前缀差和后缀差,主席树模板题 注意\(int\)和\(long long\) My complete co ...