站内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. git原理：提交原理

    当运行git add  git commit的时候,git底层都做了什么? 这里涉及到的底层命令:git hash-object 讲对象写入到git object中git update-index   ...

  2. opencv3计算机视觉+Python（四）

    使用分水岭和GrabCut算法进行物体分割 用GrabCut算法进行图像分割 在OpenCV中,实现了grabcut分割算法,该算法可以方便的分割出前景图像,操作简单,而且分割的效果很好.算法的原理参 ...

  3. 模版抽离 优化url

    抽离出base模板 复制index的代码到base里面,指定views里面跳转到base.html,删除掉会变化的保留通用的 把主要内容写写在block里面,写了三个block {% block le ...

  4. mysql分组查询

    有一张学生选课表 Table: Subject_Selection Subject Semester Attendee --------------------------------- ITB001 ...

  5. 关于IDEA导出项目jar包/runnable jar

    将项目导出为jar包分为 runnable jar 与 普通jar包 一.导出为普通jar包 该jar包中只有项目源代码, java -cp wordcount.jar 用来运行普通jar包 1.打开 ...

  6. 每天一个Linux命令（47）route命令

        Linux系统的route命令用于显示和操作内核IP路由表(show / manipulate the IP routing table).     (1)用法:     用法:  route ...

  7. opencv manager package was not found 解决办法

    http://blog.csdn.net/zjck1995/article/details/50358817 从网上好不容易找到的一个方法 1 解压OpenCV sdk 压缩包 2 eclipse 导 ...

  8. 解决：Requested 'libdrm_radeon >= 2.4.56' but version of libdrm_radeon is 2.4.52

    checking for NOUVEAU... yes checking for RADEON... no configure: error: Package requirements (libdrm ...

  9. nodejs往文件写入内容代码

    const fs = require("fs"); // fs.wirteFile有三个参数 // 1,第一个参数是要写入的文件路径 // 2,第二个参数是要写入得内容 // 3, ...

  10. 深入理解JVM2

    1 JVM简介 VM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的. ...