SCRIPT5: 拒绝访问

IE下因设置document.domain而无法和Iframe通信的解决方法

posted by 疯狂小强 at 二月 10, 2012 所属分类开发经验 1,297次阅读 发表评论»

最近在开发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代码，如下，

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>

在IE９下测试顺利通过，运行结果：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)){