javascript - spec - whatwg español

Cross Browser Dom Ready

Question

Heredé este fragmento de código y parece subóptimo y posiblemente incorrecto, ya que está agregando detectores de eventos tanto en la ventana como en los objetos de documento. Sin embargo, funciona correctamente a excepción de Blackberry 5.0. ¿Alguien puede explicar si todo esto está configurado correctamente o si hay alguna recomendación para mejorarlo y / o simplificarlo?

 if (document.readyState === "complete")
callback();
else if (document.addEventListener)
{
document.addEventListener("DOMContentLoaded",callback,false);
window.addEventListener("load",callback,false);
}
else if(window.attachEvent)
{
document.attachEvent("onreadystatechange", callback);
window.attachEvent("onLoad",callback);
} else
setTimeout(callback,2000);

Answer 1

Personalmente usaría jQuery para esto.

jQuery está diseñado para manejar la variedad de diferentes implementaciones de navegador del estado de preparación del documento.

Usando jQuery su código anterior se vería así:

$(callback);

Answer 2

Si desea usar javascript puro, puede usar la siguiente función de navegador cruzado (fuente (en ruso): http://javascript.ru/unsorted/top-10-functions )

function bindReady(handler){
var called = false
function ready() {
if (called) return
called = true
handler()
}
if ( document.addEventListener ) {
document.addEventListener( "DOMContentLoaded", function(){
ready()
}, false )
} else if ( document.attachEvent ) {
if ( document.documentElement.doScroll && window == window.top ) {
function tryScroll(){
if (called) return
if (!document.body) return
try {
document.documentElement.doScroll("left")
ready()
} catch(e) {
setTimeout(tryScroll, 0)
}
}
tryScroll()
}
document.attachEvent("onreadystatechange", function(){
if ( document.readyState === "complete" ) {
ready()
}
})
}
if (window.addEventListener)
window.addEventListener(''load'', ready, false)
else if (window.attachEvent)
window.attachEvent(''onload'', ready)
/* else // use this ''else'' statement for very old browsers :)
window.onload=ready
*/
}
readyList = []
function onReady(handler) {
if (!readyList.length) {
bindReady(function() {
for(var i=0; i<readyList.length; i++) {
readyList[i]()
}
})
}
readyList.push(handler)
}

Uso:

onReady(function() {
// ...
})

Answer 3

Si quieres saber cómo se hace o ver una forma de hacerlo. Recomiendo mirar el trabajo de Diego Perini. Su trabajo y sus métodos se utilizan en muchas bibliotecas DOM, incluyendo jQuery. El chico no parece obtener mucho crédito por desgracia. Él es el que fue pionero en el método de sondeo de prueba / captura, que es lo que hace que los eventos cargados de dominios en varios navegadores sean posibles cuando IE se integra en la mezcla.

https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js