javascript - Comportamiento iframe de onload vs addEventListener(''cargar'')
html onload-event (3)
He estado jugando con la adición de elementos iframe ocultos a una página, y quiero manipular el DOM de estos una vez cargados. Me he dado cuenta de que no puedo comenzar a manipular el DOM inmediatamente después de agregar el iframe a una página porque aún no se ha cargado. Esto no se puede hacer con el evento DOMContentLoaded , ya que se dispara contra el documento que no existe en el iframe hasta que se agrega a la página, por lo que tenemos que usar el evento load .
Aquí hay un código de prueba:
var iframe = document.createElement(''iframe'');
iframe.onload = function() { console.log(''loaded!''); };
document.getElementsByTagName(''body'')[0].appendChild(iframe);
Esto funciona como se esperaba, sin embargo, cuando lo cambio a addEventListener ni siquiera se agrega al DOM:
var iframe = document.createElement(''iframe'');
iframe.addEventListener(''load'', function() { console.log(''loaded!''); });
document.getElementsByTagName(''body'')[0].appendChild(iframe);
No he probado attachEvent en IE.
¿Alguien ha arrojado alguna luz sobre esto?
¿Funciona el primer ejemplo? No estoy seguro de lo que está buscando exactamente, pero esto debería iluminarse cuando los eventos funcionan: jQuery document.ready source
$ (documento) .ready equivalente sin jQuery
addEventListener no funciona en IE, por lo que si está probando, entonces el segundo fallará antes de que se agregue el iframe.
Sin embargo, también puede agregar una devolución de llamada desde la propia página (por ejemplo, si usa jQuery para no reinventar la rueda) sospecho que $(iframe).ready() {..} le daría un comportamiento consistente.
Esto es trabajo para mí:
html:
iframe source code: <br />
<textarea id="output" rows="20" cols="60">loading ...</textarea>
javascript (en documentReady):
var iframe = document.createElement(''iframe'');
iframe.id = iframe.name = "testframe";
iframe.src = "http://fiddle.jshell.net";
iframe.width = 400;
iframe.height = 100;
iframe.style.display = "none";
if (iframe.addEventListener)
iframe.addEventListener("load", loaded, false);
else
iframe.attachEvent("onload", loaded);
function loaded() {
var html;
if (iframe.contentDocument)
html = iframe.contentDocument.getElementsByTagName("HTML")[0].innerHTML;
else
html = window.frames[iframe.name].document.getElementsByTagName("html")[0].innerHTML;
document.getElementById("output").value = html;
}
document.getElementsByTagName("body")[0].appendChild(iframe);
Vea la demostración en: http://jsfiddle.net/WcKEz/
Funciona con addEventListener, pero incluye el respaldo para attachEvent. El acceso al DOM de IFRAME, por supuesto, solo en el mismo dominio.
addEventListener() necesita 3 argumentos! Eche un vistazo a https://developer.mozilla.org/en/DOM/element.addEventListener
El tercer argumento está marcado como opcional, pero luego escriben:
Tenga en cuenta que este parámetro no es opcional en todas las versiones del navegador.
No estoy seguro de cuándo y dónde se requiere, pero mis pruebas en FF4 arrojaron una excepción al llamar a addEventListener con 2 argumentos:
excepción no detectada: [Excepción ... "No hay suficientes argumentos". nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" ubicación: "JS frame :: http://localhost/index.php :: :: line 10" data: no]
Por cierto, tu código funciona bien en Chrome [¡la cadena loaded! se registra en la consola].
Al igual que FF, IE9 necesita el tercer argumento en el modo estándar (con <!DOCTYPE html> ). IE9 es el primer IE que admite el modelo de eventos de W3C. Así que en las versiones anteriores tenemos que probar attachEvent . No tengo IEs anteriores, pero funcionó en el modo de estándares de IE7 / 8 e incluso en el modo de quirófanos en IE9. Aquí está el código que utilicé:
<!DOCTYPE html>
<html>
<head><title></title></head>
<body>
<script>
window.onload=function(){
var iframe = document.createElement(''iframe'');
var func = function() { console.log(''loaded!'');};
if(iframe.addEventListener)
iframe.addEventListener(''load'', func, true);
else if(iframe.attachEvent)
iframe.attachEvent(''onload'',func);
document.body.appendChild(iframe);
}
</script>
</body>
</html>