zoukankan      html  css  js  c++  java
  • IE下因设置document.domain而无法和Iframe通信的解决方法(SCRIPT5: 拒绝访问)[转]

    IE下因设置document.domain而无法和Iframe通信的解决方法(SCRIPT5: 拒绝访问)[转]  

     

     
     

    最近在开发SDK的过程中发现IE下有个很怪异的问题:在同一域下,因在父页面上设置了document.domain,而导致无法正常和Iframe(也是同域下)进行通信,IE下抛出的错误是:SCRIPT5: 拒绝访问,导致无法操作iframe中的内容。

    经过查阅了很多资料后发现IE下,在父页面或在iframe页面中,只要设置了document.domain,无论是和当前域名相同还是根域名,均视为跨域,所以才会出现拒绝访问的错误,即使你这样写document.domain=document.domain;虽然好像没人这么干。

    那么如何才能解决这个问题,让父页面和iframe页面正常通信呢,根据同源策略,让双方均设置同样的domain就可以达到目的。

    比如页面A是http://www.a.com/a.html ,页面B是http://www.a.com/b.html, 这时候两个页面中都写上document.domain=”aaa.com”,这样两个页面就可以交互了。

    但是,上面的情况只适用于嵌入的页面是事先已经已<iframe src=”http://www.a.com/b.html”></iframe>的形式在页面中写好了,而如果是在页面中动态创建的iframe标签再指定其src为http://www.a.com/b.html,上面的方法就不适用 了。

    此种情况及解决方法请直接参考原著:IE下Iframe的 document.domain的怪异问题

    上面的这种情况是当Iframe的src不为空,即存在实际的引用页面的解决方法。但如果需要创建一个空白的iframe(即src不指定),还要想拿到iframe里的document对象呢?看个例子:

     

    //访问地址:http://www.a.com/a.html

    <html>

    <head>

    <title>Iframe</title>

    </head>

    <body>

    <script type="text/javascript">

    document.domain = 'a.com';

    var iframe = document.createElement("iframe");

    document.body.appendChild(iframe);

    iframe.onload = function() {

    console.log(iframe.contentWindow.document.location)

    }

    </script>

    </body>

    </html>

    有人想到设置iframe里面的domain,思路正确,但由于父页面已经设置了domain,在父页面中根本无法获取到空白iframe的document对象,也就无法设置iframe的domain。

     

    后来经过了很多尝试,也研究了twitter的SDK的代码,找到了解决方案:

    通过设置iframe的src来执行一段JS代码,如下,

    1

    iframe.src = "javascript:void((function(){document.open();document.domain='"+ document.domain + "';document.close()})())";

    通过这种方式就可以改写iframe里面的domain了,这和在浏览器地址栏里输入这段代码的功效一样,这种方式像是旁门左道,但是这确实奏效了。

    于是上面的代码更改为:

     

    //访问地址:http://www.a.com/a.html

    <html>

    <head>

    <title>Iframe</title>

    </head>

    <body>

    <script type="text/javascript">

    document.domain = 'a.com';

    var iframe = document.createElement("iframe");

    document.body.appendChild(iframe);

    try{

    iframe.contentWindow.document;

    catch (e) {

    iframe.src = "javascript:void((function(){document.open();document.domain='"+ document.domain + "';document.close()})())";

    console.log(iframe.contentWindow.document.location)

    }

    </script>

    </body>

    </html>

    在IE9下测试顺利通过,运行结果:http://www.a.com/a.html,至此,问题看似已经解决。  于是在其他版本的IE浏览器下做测试,结果出人意料,IE6-IE8均仍报错“拒绝访问”,头疼,经过反复尝试,后来无意间在设置iframe.src后,使用了setTimeout来获取iframe里的内容,靠,居然不报错了。看来是设置iframe的domain和获取iframe里面的内容这两个操作存在异步问题。

    然后将上面方法改进:

     

    //访问地址:http://www.a.com/a.html

    <html>

    <head>

    <title>Iframe</title>

    </head>

    <body>

    <script type="text/javascript">

    document.domain = 'a.com';

    var iframe = document.createElement("iframe");

    document.body.appendChild(iframe);

    if(/msie/i.test(navigator.userAgent)){

    try{

    iframe.contentWindow.document;

    catch (e) {

    iframe.onload = function() {

    console.log(iframe.contentWindow.document.location);

    iframe.onload = null;

    }

    iframe.src = "javascript:void((function(){document.open();document.domain='"+ document.domain + "';document.close()})())";

    }

    }

    </script>

    </body>

    </html>

    再次在各IE下做测试,顺利通过!至此父页面因设置了document.domain而导致无法正常和同域下用js动态创建的iframe正常通信的问题彻底得到解决!如果你在开发过程中遇到类似问题,不妨尝试下这种方法,如果你有更好的解决方案,希望能公开出来供大家一起学习,讨论。Demo地址

  • 相关阅读:
    Spring-data-jpa和mybatis的比较及两者的优缺点?
    http和https的区别
    Springboot中spring-data-jpa实现拦截器
    RabbitMQ客户端页面认识
    设计模式之策略模式
    设计模式之策略模式应用实例(Spring Boot 如何干掉 if else)
    设计模式之装饰器模式
    网页跳转小程序
    好帖子
    git 回滚操作
  • 原文地址:https://www.cnblogs.com/llkey/p/3461933.html
Copyright © 2011-2022 走看看