variable - modificar dom javascript
Recibir notificaciones cuando se haya cargado la página DOM(pero antes de window.onload) (9)
Sé que hay algunas maneras de recibir notificaciones cuando el cuerpo de la página se haya cargado (antes de todas las imágenes y recursos de terceros que cargan el evento window.onload ), pero es diferente para cada navegador.
¿Hay alguna forma definitiva de hacerlo en todos los navegadores?
Hasta ahora sé de:
DOMContentLoaded : en Mozilla, Opera 9 y los últimos WebKits. Esto implica agregar un oyente al evento:
document.addEventListener ("DOMContentLoaded", [init function], false);
Script diferido : en IE, puede emitir una etiqueta SCRIPT con un atributo @defer, que solo se cargará confiablemente después del cierre de la etiqueta BODY.
Sondeo : en otros navegadores, puede seguir sondeando, pero ¿hay incluso una pregunta estándar para sondear o necesita hacer cosas diferentes en cada navegador?
Me gustaría poder ir sin utilizar document.write o archivos externos.
Esto se puede hacer simplemente a través de jQuery:
$(document).ready(function() { ... })
pero, estoy escribiendo una biblioteca JS y no puedo contar con que jQuery siempre esté ahí.
El uso de una biblioteca como jQuery le ahorrará incontables horas de incoherencias en los navegadores.
En este caso con jQuery puedes simplemente
$(document).ready ( function () {
//your code here
});
Si tienes curiosidad, puedes echarle un vistazo a la fuente para ver cómo se hace, pero hoy en día no creo que nadie deba reinventar esta rueda cuando el escritor de la biblioteca haya hecho todo el doloroso trabajo por ti.
Encontré esta página, que muestra una solución compacta e independiente. Parece funcionar en todos los navegadores y tiene una explicación sobre cómo:
Esto funciona bastante bien:
setTimeout(MyInitFunction, 0);
No existe un método de navegador cruzado para verificar cuándo el DOM está listo: por eso existen bibliotecas como jQuery, para abstraer los desagradables pedacitos de incompatibilidad.
Mozilla, Opera y el moderno WebKit son compatibles con el evento DOMContentLoaded . IE y Safari necesitan hacks extraños como desplazarse por la ventana o consultar hojas de estilo. Los detalles sangrientos están contenidos en la función bindReady() jQuery.
Solo tome la parte relevante del código de jQuery, John Resig ha cubierto la mayoría de las bases sobre este tema ya en jQuery.
YUI usa tres pruebas para hacer esto: para Firefox y WebKit reciente hay un evento DOMContentLoaded que se activa. Para Safari más antiguo, document.readyState observó hasta que se "cargó" o "completó". Para IE, se crea una etiqueta HTML <P> y se llama al método "doScroll ()", que debería generar un error si el DOM no está listo. La fuente de YAHOO.util.Event muestra el código específico de YUI. Busque "doScroll" en Event.js.
¿Por qué no esto?
<body>
<!-- various content -->
<script type="text/javascript">
<!--
myInit();
-->
</script>
</body>
Si entiendo las cosas correctamente, myInit se ejecutará tan pronto como el navegador lo presione en la página, que es lo último en un cuerpo.
Usar setTimeout puede funcionar bastante bien, aunque cuando se ejecuta depende del navegador. Si pasas el cero como el tiempo de espera, el navegador se ejecutará cuando las cosas estén "resueltas".
Lo bueno de esto es que puedes tener muchos de ellos, y no tienes que preocuparte por encadenar eventos de OnLoad.
setTimeout(myFunction, 0);
setTimeout(anotherFunction, 0);
setTimeout(function(){ doSomething ...}, 0);
etc.
Todos se ejecutarán cuando el documento haya terminado de cargarse, o si configura uno después de cargar el documento, se ejecutarán luego de que el script haya terminado de ejecutarse.
El orden en el que se ejecutan no está determinado y puede cambiar entre los navegadores. Por lo tanto, no puede contar con que myFunction se ejecute antes que anotherFunction por ejemplo.
La solución elegante de navegador que está buscando ... no existe ... (imagine el sonido de una gran multitud que dice ''aahhhh ...'').
DomContentLoaded es simplemente tu mejor opción . Aún necesita la técnica de polling para IE-oldies.
- Intenta usar addEventListener;
- Si no está disponible (IE obviamente), verifique si hay marcos;
- Si no es un marco, desplácese hasta que no se genere ningún error (sondeo);
- Si es un marco, utilice el documento de evento de IE.inreadystatechange;
- Para otros navegadores no compatibles, use el evento document.onload anterior.
Encontré el siguiente ejemplo de código en javascript.info que puede usar para cubrir todos los navegadores:
function bindReady(handler){
var called = false
function ready() {
if (called) return
called = true
handler()
}
if ( document.addEventListener ) { // native event
document.addEventListener( "DOMContentLoaded", ready, false )
} else if ( document.attachEvent ) { // IE
try {
var isFrame = window.frameElement != null
} catch(e) {}
// IE, the document is not inside a frame
if ( document.documentElement.doScroll && !isFrame ) {
function tryScroll(){
if (called) return
try {
document.documentElement.doScroll("left")
ready()
} catch(e) {
setTimeout(tryScroll, 10)
}
}
tryScroll()
}
// IE, the document is inside a frame
document.attachEvent("onreadystatechange", function(){
if ( document.readyState === "complete" ) {
ready()
}
})
}
// Old browsers
if (window.addEventListener)
window.addEventListener(''load'', ready, false)
else if (window.attachEvent)
window.attachEvent(''onload'', ready)
else {
var fn = window.onload // very old browser, copy old onload
window.onload = function() { // replace by new onload and call the old one
fn && fn()
ready()
}
}
}