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:
<!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>
I've hosted it at:
http://troy.onespot.com/static/access_denied.html
As 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.
