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" del <iframe> porque no quiero cargar una página; más bien, se usa para aislar / aislar el contenido que inserto en él para que no me encuentre con 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>.
Esto funciona bien, con una excepción seria: si la propiedad document.domain está configurada en la página principal (que puede ser en ciertos entornos en los que se implementa este widget), Internet Explorer (probablemente todas las versiones, pero he 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 en el que haya probado (todos los principales modernos).
Esto tiene cierto sentido, ya que soy consciente de que Internet Explorer requiere que configure el dominio de documento de todas las ventanas / marcos que se comunicarán entre sí con el mismo valor. Sin embargo, no conozco ninguna forma de establecer este valor en un documento al que no puedo acceder.
¿Alguien conoce alguna forma de hacer esto, de alguna manera establecer la propiedad document.domain de este <iframe> creado dinámicamente? ¿O no lo estoy viendo desde el ángulo correcto? ¿Hay otra manera de lograr lo que busco sin encontrarme con este problema? Necesito usar un <iframe> en cualquier caso, ya que la ventana aislada / en 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 momento en que llamo a alert (), tengo un identificador en el objeto de ventana del <iframe>; Simplemente no puedo profundizar más 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.