`

Ajax跨子域之document.domain+iframe实现

    博客分类:
  • Ajax
阅读更多
    http://js8.in/443.html
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="display:none;">
    </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

二、IE中iframe和document.selection.createRange导致跨域
两层iframe,经过调试发现是document.selection.createRange导致的错误,在浏览器中报“拒绝访问”,猜测是跨域导致的。于是加上document.domain主域就搞定了。

本来以为是两层iframe导致的(因为他们反映一层iframe没有问题),于是自己建了个demo,test.qq.com/qq1.html代码如下:

<iframe src="http://demos.qq.com/qq2.html" frameborder="0" id="myIframe"></iframe>

demos.qq.com/qq2.html代码如下:

<script type="text/javascript">
    //document.domain = 'qq.com';
    var a = document.selection.createRange();
</script>

这样在IE9中访问test.qq.com/qq1.html就会报错,而把qq2.html和qq1.html都添加document.domain='qq.com';就可以了。

分享到:
评论

相关推荐

    PHP ajax跨子域的解决方案之document.domain+iframe实例分析

    本文实例讲述了PHP ajax跨子域的解决方案之document.domain+iframe。分享给大家供大家参考,具体如下: 对于主域相同,子域不同,我们可以设置相同的document.domain来欺骗浏览器,达到跨子域的效果。 例如:我们有...

    跨域解决方案

    2. document.domain + iframe 跨域:此方案仅限主域相同,子域不同的跨域请求情况。我们可以通过强制设置 document.domain 为基础主域,从而实现同域。 3. location.hash + iframe 跨域 4. window.name + iframe ...

    JS跨域请求解决方案.docx

    - **实现原理**:两个页面都需要通过JavaScript设置`document.domain`为基础主域,从而实现同源。 - **示例代码** (父窗口:`www.domain.com/a.html`): ```html &lt;iframe id="iframe" src=...

    完美解决iframe跨域问题

    3. **修改`document.domain`**:如果父页面和子页面的顶级域名相同,但子域名不同,可以尝试设置`document.domain`为相同的顶级域名,从而解除跨域限制。但这种方法只适用于部分情况,且有安全隐患。 4. **JSONP...

    js中几种实用的跨域方法原理详解

    2. 修改`document.domain`跨子域 当两个页面处于同一主域但不同子域时,可以通过设置`document.domain`来实现跨域通信。例如,`http://www.example.com/a.html`和`http://example.com/b.html`可以通过将`document....

    iframe跨域调用父窗口js.zip

    5. **CORS(跨源资源共享)**:虽然主要是用于Ajax请求,但也可以应用于iframe。通过在服务器端设置合适的CORS头(如`Access-Control-Allow-Origin`),可以让iframe与父页面进行跨域通信。但这通常需要服务器端的...

    详解自定义ajax支持跨域组件封装

    其中,document.domain+iframe方法可以用于主域相同而子域不同的请求。 本篇文章详细分析了自定义ajax支持跨域组件封装相关的知识点,包括Class.create()分析、Object.extend()分析、Ajax定义、XMLHttpRequest详解...

    前端常见跨域解决方案(全)

    2. `document.domain` + `iframe`跨域:在主页面和`iframe`页面都设置`document.domain`为相同的值,这样两个页面就可以相互访问对方的DOM元素和JavaScript对象,实现跨域通信。 3. `location.hash` + `iframe`:...

    Ajax 跨域如何实现

    可以通过在两者之间设置相同的`document.domain`(如"coolkissbh.com")来实现跨子域通信。具体步骤如下: - 在coolkissbh.com页面中,使用iframe加载blog.coolkissbh.com下的AjaxProxy.aspx。 - AjaxProxy.aspx...

    AJAXCDR:利用 Flash 完美解决 JavaScript 和 AJAX 跨域 HTTP POST/GET 表单请求

     本域和子域的交互,可以通过iframe设置两个域名document.domain = "s135.com",实现统一s135.com域下的跨域访问。  本域和其他域的交互,可以通过iframe、代理、JS创建动态脚本等几种方法来实现,这里有篇文章对...

    js json ajax jsp 跨域訪問的例子

    4. document.domain:如果主域相同,但子域不同的情况下,可以设置`document.domain`属性为相同的值,以实现跨子域访问。 5. window.postMessage:这是一种在不同源的窗口之间进行异步通信的方法,适用于如iframe、...

    Ajax常见面试题.pdf

    - document.domain:原理是让不同子域之间的页面设置相同的domain,实现跨域。这通常用于相同主域名不同子域名的情况。 - iframe:可以将一个域的页面嵌入到另一个域的页面中,实现跨域。但需要注意,设置iframe...

    ajax跨域(基础域名相同)表单提交的方法

    通过将页面中的document.domain设置为基础域名,可以使得不同子域下的文档能够相互访问对方的iframe。这是实现跨域操作的一种基础手段。 5. 使用jquery.form.js进行AJAX表单提交 文中提到使用jquery.form.js插件来...

    js -- 跨域问题.doc

    document.domain是浏览器用于判断两个页面是否同源的属性。可以设置相同的document.domain属性值来解决跨域。缺点是该方法只限于主域相同,子域不同的跨域场景。 (3)postMessage API解决跨域 postMessage API...

    Ajax跨域问题的解决办法汇总(推荐)

    如果两个域是同一父域下的子域,比如***和***,可以通过设置`document.domain = '***'`来使这两个域互相能够访问对方的iframe中的文档。这种方法只适用于子域之间,且需要在两个域中都设置。 5. 使用window.name + ...

    js跨域问题解决方案.

    JSONP适用于简单的GET请求,CORS是现代浏览器推荐的通用方案,代理服务器适用于复杂的后端集成,`document.domain`适用于同一顶级域名下的跨子域,`postMessage`适合页面间的通信,而Webworker则用于后台处理。...

    使用HTML5中postMessage知识点解决Ajax中POST跨域问题

    1. **document.domain+iframe**:如果子域相同,可以通过设置`document.domain`为相同的值来允许同源策略放宽,使父页面和iframe能够通信。 2. **动态创建script**:通过动态创建`&lt;script&gt;`标签并设置其`src`属性为...

    javascript iframe跨域详解

    当两个页面的document.domain设置为同一个父域时,可以实现子域与父域之间或子域与子域之间的数据交换。例如,***和***都可以设置document.domain为"***",这样它们之间就能通过iframe进行数据交互。 2. 使用iframe...

Global site tag (gtag.js) - Google Analytics