CocoaPods DOM IE IE6 Node Nodejs PPT Promise Rem SSR VPS Vue ajax apache audio a标签 canvas chrome css debug eAccelerator ecmascript escape event express fis fisp grunt handleEvent html5 hybrid iOS iframe ios iptables javascript jssdk kindle linux livereload livestyle memcached mixjs mysql name nginx nodejs php session storage svn this ueditor uglifyjs vps webapp webbench websocket web前端开发 windows7技巧 wordpress xss 严格模式 位运算 作用域 前端优化 前端工具 加速器 劫持 博客 压力测试 右键 安全 工作 工具 性能 性能优化 手机开发 执行环境 技巧 抓取 抓站 播放器 效率 数组 架构 标签 模块化 渲染模式 游戏 移动前端 算法 练手 经验 网络技术 虚拟主机 解耦 语法限制 资源管理 越狱 跨域 路径 软件心得 重构 随笔 面试

Ajax跨域一直是个比较麻烦的问题，例如：断桥残雪在一个项目中使用了open打开一个跟父窗口不同域名的新页面，结果子窗口就不能传值给父窗口了；再如：我在 www.2fool.cn下不可以获取love.2fool.cn域名下的页面内容。**浏览器的跨域**限制是为了安全，可是当我们想要在一个域名下请求另外一个域名的内容的时候就感觉不那么爽了。

我在 WordPress天气插件 、 滔滔API接口 处理上都使用了 JSONP 的方法来实现的跨域。而今天我要通过使用JS的 document.domain和iframe来解决Ajax跨子域的问题 。

原理

通过给主页面跟请求页面设置相同的document.domain来，欺骗浏览器，达到 Ajax跨子域 的效果，此方法在IE，chrome，Firefox，Safari，Opera下测试通过。

缺点： 无法实现不同主域名之间的通讯。并且当在一个页面中还包含有其它的iframe时，会产生安全性异常，拒绝访问。

使用document.domain+iframe跨域实例

首先我们假设主页面地址为： http://js8.in/mywork/crossdomain/index.html ，我们要加载的内容是位于work.2fool.cn域名下的helloworld.txt。我们需要在主页面中设置 document.domain 为2fool.cn，然后主页面添加一个iframe，src为域名work.2fool.cn下的一个url，在iframe页面中同样设置document.domain为2fool.cn，同时 iframe 中需要添加Ajax的函数，例如引入jQuery.js。

主页index.html的主要代码如下：

<button onclick="crossDomain();">开始跨域</button>
<div id="ajax"></div>
<iframe src="http://work.2fool.cn/crossdomain/iframe.html" id="iframe" style=";">
</iframe>
<script type="text/javascript">
document.domain = '2fool.cn';
function crossDomain(){
    var iframe=document.getElementById('iframe').contentWindow.$;        
    iframe.get("http://work.2fool.cn/crossdomain/helloworld.txt",function(data){
        document.getElementById("ajax").innerHTML=data;
</script>
iframe页面主要代码如下：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
document.domain = '2fool.cn';
</script>
演示Demo
演示地址：http://js8.in/mywork/crossdomain/index.html
演示下载：http://js8.in/mywork/crossdomain/crossdomain.zip