我有一个项目,我需要使用JavaScript创建一个<iframe>元素并将其附加到DOM。 之后,我需要在<iframe>中插入一些内容。 它是一个嵌入第三方网站的小部件。
我没有设置<iframe>的“src”属性,因为我不想加载页面; 相反,它用于隔离/沙箱插入我插入的内容,以便我不会遇到CSS或JavaScript与父页面冲突。 我正在使用JSONP从服务器加载一些HTML内容并将其插入此<iframe>。
我有这个工作正常,有一个严重的例外 – 如果在父页面中设置document.domain属性(它可能在部署此小部件的某些环境中),Internet Explorer(可能是所有版本,但我已经当我尝试访问我创建的<iframe>的文档对象时,在6,7和8中确认给了我“访问被拒绝”错误。 它不会在我测试的任何其他浏览器中发生(所有主要的现代浏览器)。
这是有道理的,因为我知道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>的窗口对象; 我只是无法深入到其文档对象中。
非常感谢任何帮助或建议! 我非常感谢能帮助我找到解决方案的人。
I have project in which I need to create an <iframe> element using JavaScript and append it to the DOM.After that, I need to insert some content into the <iframe>.It’s a widget that will be embedded in third-party websites.I don’t set the “src” attribute of the <iframe> since I don’t want to load a page;rather, it is used to isolate/sandbox the content that I insert into it so that I don’t run into CSS or JavaScript conflicts with the parent page.I’m using JSONP to load some HTML content from a server and insert it in this <iframe>.I have this working fine, with one serious exception – if the document.domain property is set in the parent page (which it may be in certain environments in which this widget is deployed), Internet Explorer (probably all versions, but I’ve confirmed in 6, 7, and 8) gives me an “Access is denied” error when I try to access the document object of this <iframe> I’ve created.It doesn’t happen in any other browsers I’ve tested in (all major modern ones).This makes some sense, since I’m aware that Internet Explorer requires you to set the document.domain of all windows/frames that will communicate with each other to the same value.However, I’m not aware of any way to set this value on a document that I can’t access.Is anyone aware of a way to do this – somehow set the document.domain property of this dynamically created <iframe>?Or am I not looking at it from the right angle – is there another way to achieve what I’m going for without running into this problem?I do need to use an <iframe> in any case, as the isolated/sandboxed window is crucial to the functionality of this widget.Here’s my test code:I’ve hosted it at:http://troy.onespot.com/static/access_denied.htmlAs you’ll see if you load this page in IE, at the point that I call alert(), I do have a handle on the window object of the <iframe>;I just can’t get any deeper, into its document object.Thanks very much for any help or suggestions!I’ll be indebted to whomever can help me find a solution to this.
admin