站内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. 011-git-将tag推送到远端

    1.将tag推送到远端 在使用TortoiseGit过程中,push推送过程中,选择include tag,远端就有次分支.

  2. python中json.dumps使用的坑以及字符编码

    我们知道,python中的字符串分普通字符串和unicode字符串,一般从数据库中读取的字符串会自动被转换为unicode字符串 下面回到重点,使用json.dumps时,一般的用法为: >&g ...

  3. linux中获取系统时间的几种方法

    asctime(将时间和日期以字符串格式表示) 相关函数 time,ctime,gmtime,localtime 表头文件 #include<time.h> 定义函数 char * asc ...

  4. foreach使用和函数

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

  5. 【转】SVN使用教程总结

    看到一篇超赞的文章,原链接:http://www.cnblogs.com/armyfai/p/3985660.html SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成 ...

  6. Bootstrap入门教程

    资料来源: http://www.cnblogs.com/ventlam/archive/2012/05/28/2520703.html 1.全局样式:Bootstrap要求html5的文件类型,所以 ...

  7. 解决远程桌面关闭后teamviewer不能连接的问题

    使用windows远程桌面连接远程电脑,在关闭远程桌面后,windows系统会锁定,此时再用teamviewer连接会出现“无法捕捉画面”或者“拒绝连接”的问题. 解决办法:设置要连接的远程电脑上的t ...

  8. predis操作大全

    predis是php连接redis的操作库,由于它完全使用php编写,大量使用命名空间以及闭包等功能,只支持php5.3以上版本,故实测性能一般,每秒25000次读写,相信改换c语言编写的php扩展后 ...

  9. 教你在Yii2.0框架中如何创建自定义小部件

    本教程将帮助您创建自己的自定义小部件在 yii framework 2.0.部件是可重用的模块和用于视图. 创建一个小部件,需要继承 yii\base\Widget,覆盖重写 yii\base\Wid ...

  10. Java中finalize()用法

    Java中finalize()   垃圾回收器要回收对象的时候,首先要调用这个类的finalize方法(你可以 写程序验证这个结论),一般的纯Java编写的Class不需要重新覆盖这个方法,因为Obj ...