站内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. 修改mysql root的密码

    use mysql:update user set Password = Password('newPwd') where user='root';//更改root用户的密码flush privile ...

  2. jquery 字符串转为json

    使用ajax从服务器拿到的数据,jquery总是认为是字符串,无法直接使用,可以通过下面代码转换: $.get("服务器路径", function(data) { data = e ...

  3. foreach使用和函数

    2016-04-25 一.foreach( 对集合每个元素的引用 in 集合 ) { } int[] a = new int[5]{1,2,3,4,5}; foreach( int b in a ) ...

  4. Nginx反向代理+负载均衡简单实现

    一.基础环境: 负   载  机:A机器: 192.168.71.223后端机器1:B机器:192.168.71.224后端机器2:C机器:192.168.71.226 需求: 1)访问A机器的808 ...

  5. c# 抽象类（abstract）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; //抽象类(abstract ...

  6. SM3算法

    /* * sm3.h * * 为使此算法兼容32位.64位下Linux或Windows系统, * 选择 int 来表示 32 位整数. * 消息长度最大限定为 2**32 - 1(单位:比特), * ...

  7. PPA（Personal Package Archives）简介、兴起、使用

    1.简介 PPA是Personal Package Archives,个人软件包文档,是默认情况下并未被包含在Ubuntu中的软件的一个集合.通常这些存储库的侧重点是单个的程序,不过他们也可以包含更多 ...

  8. PHP领域类型Java中ibatis的API

    最近公司技术调整,要把java用php换掉,其中java主要的工作就是查询数据库,并返回json,ORM用的是ibatis,主要用到了Object映射和动态SQL,组员们用的都挺6,转到PHP后,发现 ...

  9. shell set 命令

    用set命令可以设置各种shell选项或者列出shell变量.单个选项设置常用的特性.在某些选项之后-o参数将特殊特性打开.在某些选项之后使用+o参数将关闭某些特性,不带任何参数的set命令将显示sh ...

  10. 摊铺机基本参数介绍(三一重工SSP220C-5)

    三一重工SSP220C-5稳定土摊铺机参数 SSP系列稳定土摊铺机SSP220C-5 动力强劲162kw 动力充分满足摊铺机各种工况下动力需求 高效任何工况,确保摊铺能力大于900t/h,行业内绝无仅 ...