¿Por qué al agregar un <script> a un <iframe> creado dinámicamente parece ejecutar el script en la página principal?

Estoy intentando crear un marco flotante < > uso de JavaScript, tiene que poner un elemento > < secuencia de comandos para que <iframe>, que quiero correr en el contexto de la < iframe documento > d.¿Por qué al agregar un <script> a un <iframe> creado dinámicamente parece ejecutar el script en la página principal?

Por desgracia, parece que estoy haciendo algo mal - mi JavaScript parece ejecutar con éxito, pero el contexto de la secuencia de comandos > < es la página principal, no el documento d <iframe>. También recibo un error 301 en la pestaña "Net" de Firebug cuando el navegador solicita iframe_test.js, aunque luego lo solicita nuevamente (¿no estoy seguro de por qué?) Con éxito.

Este es el código que estoy usando (demostración en vivo en http://onespot.wsj.com/static/iframe_test.html):

iframe_test.html

<!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>&lt;iframe&gt; test</title> 
    </head> 
    <body> 
    <div id="bucket"></div> 
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $('#bucket').append('<iframe id="test"></iframe>'); 
     setTimeout(function() { 
      var iframe_body = $('#test').contents().find('body'); 
      iframe_body.append('<scr' + 'ipt type="text/javascript" src="http://onespot.wsj.com/static/iframe_test.js"></scr' + 'ipt>'); 
     }, 100); 
     }); 
    </script> 
    </body> 
</html>

iframe_test.js

$(function() { 
    var test = '<p>Shouldn\'t this be inside the &lt;iframe&gt;?</p>'; 
    $('body').append(test); 
});

una cosa que parece inusual es que el código en iframe_test.js incluso funciona; No he cargado jQuery en el iframe <mismo>, solo en el documento principal. Parece una pista para mí, pero no puedo entender lo que significa.

¡Cualquier idea, sugerencia, etc. sería muy apreciada!

Fuente

2009-10-19 Bungle

Quizás tiene que ver con el hecho de que el elemento

No encontré una respuesta a mi pregunta original, pero encontré otro enfoque que funciona aún mejor (al menos para mis propósitos).

Esto no utiliza jQuery en la página principal (que es realmente una buena cosa, ya que prefiero no cargar allí), pero no cargar jQuery en el marco flotante < > de forma aparentemente completamente válido y forma utilizable Todo lo que hago es escribir sobre el objeto de documento <iframe> con uno nuevo creado desde cero. Esto me permite simplemente incluir un elemento de script < > en una cadena que luego escribo en el <iframe> objeto de documento.

El código:

<!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>frame</title> 
    </head> 
    <body> 

    <div id="test"></div> 

    <script type="text/javascript"> 
     // create a new <iframe> element 
     var iframe = document.createElement('iframe'); 

     // append the new element to the <div id="bucket"></div> 
     var bucket = document.getElementById('test'); 
     bucket.appendChild(iframe); 

     // create a string to use as a new document object 
     var val = '<scr' + 'ipt type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></scr' + 'ipt>'; 
     val += '<scr' + 'ipt type="text/javascript"> $(function() { $("body").append("<h1>It works!</h1>"); }); </scr' + 'ipt>'; 

     // get a handle on the <iframe>d document (in a cross-browser way) 
     var doc = iframe.contentWindow || iframe.contentDocument; 
     if (doc.document) { 
     doc = doc.document; 
     } 

     // open, write content to, and close the document 
     doc.open(); 
     doc.write(val); 
     doc.close(); 
    </script> 

    </body> 
</html>

espero que esto ayude a alguien por el camino!

Fuente

2009-10-19 22:09:12 Bungle

Esto es exactamente lo que estoy buscando. ¿Hay alguna forma de AÑADIR al iframe para que los contenidos del cuerpo no se borren? – AnApprentice

¿Por qué escribir'' user2284570

@ user2284570: Los navegadores interpretarán cualquier cadena HTML literalmente en las etiquetas '';' se interpretaría como una etiqueta de cierre prematura para la secuencia de comandos actual, lo que daría lugar a un error de sintaxis. – Bungle

La respuesta a la pregunta original es simple: jquery ejecuta la ejecución del script, y como jquery se carga en el marco superior, aquí es donde se ejecuta el script, sin importar dónde lo anexe.Sin embargo, una implementación más inteligente de jquery puede hacerse para usar el objeto de ventana correcto, pero por ahora las cosas son como son.

En cuanto a las soluciones provisionales, ya tiene dos buenas respuestas (incluso si una es suya). Lo que podría agregar es que puede usar una de esas soluciones para incluir jquery.js en el iframe, y luego obtener ese objeto jquery en lugar del superior para insertar su marcado adicional ... pero eso también puede ser exagerado.

Fuente

2013-02-25 14:55:07 user2107721

falso: https://jsfiddle.net/vohn8w80/ –

Cuestiones relacionadas