Error de JavaScript de "acceso denegado" al intentar acceder al objeto de documento de un <iframe> creado por programación (solo IE)
Tengo un proyecto en el que necesito crear un elemento <iframe> usando JavaScript y agregarlo al DOM. Después de eso, necesito insertar algo de contenido en el <iframe>. Es un widget que se integrará en sitios web de terceros.
No configuro el atributo "src" de <iframe> ya que no quiero cargar una página; más bien, se utiliza para aislar / sandbox el contenido que inserto en él para que no se produzcan conflictos de CSS o JavaScript con la página principal. Estoy usando JSONP para cargar contenido HTML desde un servidor e insertarlo en este <iframe>.
Estoy trabajando bien, con una excepción seria: si la propiedad document.domain está establecida en la página principal (que puede estar en ciertos entornos en los que se implementa este widget), Internet Explorer (probablemente todas las versiones, pero confirmado en 6, 7 y 8) me da un error de "Acceso denegado" cuando intento acceder al objeto de documento de este <iframe> que he creado. No sucede en ningún otro navegador que haya probado (todos los principales modernos).
Esto tiene algún sentido, ya que soy consciente de que Internet Explorer requiere que configure el dominio document.domain de todas las ventanas / marcos que se comunicarán entre sí al mismo valor. Sin embargo, no conozco ninguna forma de establecer este valor en un documento al que no puedo acceder.
¿Alguien es consciente de una manera de hacer esto? ¿De alguna manera establece la propiedad document.domain de este <iframe> creado dinámicamente? ¿O no lo estoy viendo desde el ángulo correcto? ¿Hay otra forma de lograr lo que estoy buscando sin encontrar este problema? Necesito usar un <iframe> en cualquier caso, ya que la ventana aislada / de espacio aislado es crucial para la funcionalidad de este widget.
Aquí está mi código de prueba:
<!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>
Lo he alojado en:
http://troy.onespot.com/static/access_denied.html
Como verá si carga esta página en IE, en el punto que llamo alert (), tengo un identificador en el objeto de ventana del <iframe>; Simplemente no puedo profundizar en su objeto de documento.
Muchas gracias por cualquier ayuda o sugerencia! Estaré en deuda con quien pueda ayudarme a encontrar una solución a esto.