我有一个项目,我需要在其中使用 JavaScript 创建一个 <iframe> 元素并将其附加到 DOM。之后,我需要在 <iframe> 中插入一些内容。这是一个将嵌入第三方网站的小部件。
我没有设置 <iframe> 的“src”属性,因为我不想加载页面;相反,它用于隔离/沙箱我插入的内容,这样我就不会遇到与父页面的 CSS 或 JavaScript 冲突。我正在使用 JSONP 从服务器加载一些 HTML 内容并将其插入到这个 <iframe> 中。
我有这个工作正常,有一个严重的例外 - 如果在父页面中设置了 document.domain 属性(它可能在部署此小部件的某些环境中),Internet Explorer(可能是所有版本,但我已经在 6、7 和 8 中确认)当我尝试访问我创建的这个 <iframe> 的文档对象时,出现“访问被拒绝”错误。在我测试过的任何其他浏览器(所有主要的现代浏览器)中都不会发生这种情况。
这是有道理的,因为我知道 Internet Explorer 要求您将所有将相互通信的窗口/框架的 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> 的 window 对象上有一个句柄;我只是无法更深入地了解它的文档对象。
非常感谢您的任何帮助或建议!我将感谢任何能帮助我找到解决方案的人。