¿Cuándo solicita un browser web el contenido src de un iframe creado dinámicamente?

Digamos que creo dinámicamente un nodo iframe usando js, ​​luego establezco el atributo src (1) y finalmente anexo el nodo al DOM (2).

¿Cuándo es el contenido src solicitado por el browser? Después de (1)? Después de (2)? ¿O es impnetworkingecible? ¿Depende del browser?

La especificación declara:

Cuando un elemento de iframe se inserta por primera vez en un documento , el agente de usuario debe crear un context de exploración nested y luego procesar los attributes de iframe por primera vez.


Utilizando el siguiente fragment de código y un server local, probé el comportamiento en muchos browseres.

 var f = document.createElement('iframe'); f.src = '/?'; 

El recurso nunca se extrae (solo he mostrado la versión de browser probada más baja y más alta):

  • IE 6 – 9
  • FF 3.6 – 12.0
  • Chrome 1 – 18
  • Opera 10.00 a 12.00
  • Safari 4.0 – 5.1.5

Por lo tanto, la request solo se envía una vez que el marco se anexa al documento.

Después de (2). Antes de eso, es solo JS. El browser no actuará sobre él hasta que esté conectado al DOM.

Bueno, no voy a probar cada browser por ti, pero siempre esperaría que los elementos con attributes src y href que enlazan o cargan contenidos de algún tipo siempre se carguen después de que realmente se anexen, ya que cuando / donde un iframe o un el file js cae en el documento impacta en una tonelada de preocupaciones de security e implementación general. Sería un error fundamental en la parte del proveedor del browser hacerlo de otra manera y puedo ver de hecho que Chrome lo hace de esa manera con un poco de experimentación.

La única exception en la que puedo pensar es en imágenes que pueden cargarse antes de la inserción.

En mi experiencia, siempre ha sido cuando el nodo se agrega al DOM. Puede cargar Firebug, o alguna otra console de desarrollo, y ver cuándo ocurre esto. Eche un par de alertas para asegurarse de que el time sea el siguiente:

 <script type="text/javascript"> ifrm = document.createElement("IFRAME"); ifrm.setAttribute("src", "http://blah.com/"); alert('SRC SET'); ifrm.style.width = 640+"px"; ifrm.style.height = 480+"px"; document.body.appendChild(ifrm); alert('ADDED TO DOM'); </script> 

Ejecute algo así y mire la pestaña "Red" en Firebug para ver cuándo se solicita la página. Creo que solo se solicitará después de que se llame a appendChild.

¡Después (2)! eche un vistazo a esto: http://jsfiddle.net/lbstr/td7DD/

Abre firebug o la console de Chrome y mira la pestaña de networking. Verás google cargando. Luego, comente la tercera línea y ejecútela nuevamente. No verás la carga de Google.