我有一个项目,需要使用 JavaScript 创建一个 < iframe > 元素并将其附加到 DOM。之后,我需要在 < iframe > 中插入一些内容。这是一个嵌入第三方网站的插件。
我不设置 < iframe > 的“ src”属性,因为我不想加载页面; 相反,它用于隔离/沙箱内容,我插入到它,以便我不会遇到 CSS 或 JavaScript 与父页面冲突。我使用 JSONP 从服务器加载一些 HTML 内容,并将其插入到 < iframe > 中。
我可以很好地工作,但有一个严重的例外——如果 document.domain 属性设置在父页面(它可能在部署这个小部件的某些环境中) ,Internet Explorer (可能是所有的版本,但我已经在6、7和8中确认了)在我尝试访问我创建的 < iframe > 的文档对象时会给我一个“访问被拒绝”错误。在我测试过的任何其他浏览器(所有主要的现代浏览器)中都不会出现这种情况。
这是有道理的,因为我知道,Internet Explorer 需要你设置所有 windows/frame 的 document.domain,它们彼此之间通信的值是相同的。但是,我不知道有什么方法可以在无法访问的文档上设置这个值。
是否有人知道这样做的方法-以某种方式设置这个动态创建的 < iframe > 的 document.domain 属性?或者我没有从正确的角度来看待这个问题——是否有其他的方法可以达到我想要的效果而不会遇到这个问题?在任何情况下,我都需要使用 < iframe > ,因为隔离/沙箱窗口对这个小部件的功能至关重要。
这是我的测试代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Document.domain Test</title>
<script type="text/javascript">
document.domain = 'onespot.com'; // set the page's document.domain
</script>
</head>
<body>
<p>This is a paragraph above the <iframe>.</p>
<div id="placeholder"></div>
<p>This is a paragraph below the <iframe>.</p>
<script type="text/javascript">
var iframe = document.createElement('iframe'), doc; // create <iframe> element
document.getElementById('placeholder').appendChild(iframe); // append <iframe> element to the placeholder element
setTimeout(function() { // set a timeout to give browsers a chance to recognize the <iframe>
doc = iframe.contentWindow || iframe.contentDocument; // get a handle on the <iframe> document
alert(doc);
if (doc.document) { // HEREIN LIES THE PROBLEM
doc = doc.document;
}
doc.body.innerHTML = '<h1>Hello!</h1>'; // add an element
}, 10);
</script>
</body>
</html>
我主持的网站是:
Http://troy.onespot.com/static/access_denied.html
如果你在 IE 中加载这个页面,在我调用 alert ()的时候,你会看到,我确实有一个 < iframe > 窗口对象的句柄; 我只是不能深入到它的文档对象中。
非常感谢您的帮助和建议!谁能帮我找到解决办法,我就感激不尽。