elemento - obtener contenido de un div javascript
¿Cómo comprobar si DOM está listo sin un marco? (6)
La pregunta es tan similar a un trillón de otros aquí y en la web: ¿cómo comprobar si DOM ha cargado en Javascript? Pero aquí está el truco:
- Sin usar un marco como jQuery, etc.
- Sin saber si su script se ha cargado a través de una etiqueta
<script>colocada de forma estática o mediante algún otro JavaScript mucho más tarde después de que DOM ya se haya cargado.
¿Se puede hacer esto de manera más o menos confiable y con compatibilidad entre navegadores?
Agregado: Permítanme aclarar: estoy escribiendo un archivo .JS independiente que se puede incluir en páginas web arbitrarias. Quiero ejecutar el código DESPUÉS de que el DOM haya sido cargado. Pero no sé CÓMO se incluirá mi guión. Podría ser colocando una etiqueta <script> (en cuyo caso funcionarán las soluciones tradicionales onload o DOM-readyiness); o podría cargarse a través de AJAX u otros medios, mucho después de que el DOM ya esté cargado (de modo que las soluciones mencionadas anteriormente nunca se dispararán).
Aquí hay una forma de ejecutar el script en la parte inferior de la página. Además, al usar window.onload puede esperar a que se carguen todas las imágenes / scripts. O simplemente podría colocar el código en la parte inferior, sin esperar a que se carguen las imágenes.
<html>
<head>
</head>
<body>
</body>
<script language="text/javascript">
window.onload = (function (oldOnLoad) {
return function () {
if (oldOnLoad) {
olOnLoad(); //fire old Onload event that was attached if any.
}
// your code to run after images/scripts are loaded
}
})(window.onload);
// your code to run after DOM is loaded
</script>
</html>
Editado: por el comentario de Vilx
Muchos enlaces de carga aquí son un ejemplo http://jsfiddle.net/uTF2N/3/
El evento DOMContentLoaded se DOMContentLoaded cuando el documento HTML inicial se ha cargado y analizado por completo, sin esperar a que las hojas de estilo, imágenes y subtramas finalicen la carga. Lo bueno es que Chrome, Firefox, IE9, Opera y Safari lo admiten por igual.
document.addEventListener("DOMContentLoaded", function(event)
{
console.log("DOM fully loaded and parsed");
}
NOTA: Internet Explorer 8 admite el evento readystatechange, que se puede usar para detectar cuándo el DOM está listo.
Esto funciona para todos los navegadores y es breve y conciso:
var execute = function () {
alert("executing code");
};
if ( !!(window.addEventListener) )
window.addEventListener("DOMContentLoaded", execute)
else // MSIE
window.attachEvent("onload", execute)
La propiedad document.readyState se puede usar para verificar si el documento está listo:
if(document.readyState === "complete") {
//Already loaded!
}
else {
//Add onload or DOMContentLoaded event listeners here: for example,
window.addEventListener("onload", function () {/* your code here */}, false);
//or
//document.addEventListener("DOMContentLoaded", function () {/* code */}, false);
}
Los navegadores basados en Firefox, Opera y Webkit tienen un evento a nivel de documento DOMContentLoaded que puedes escuchar con document.addEventListener("DOMContentLoaded", fn, false) .
Es más complicado en IE. Lo que jQuery hace en IE es mirar onreadystatechange en el objeto del documento para un readystate particular con una copia de seguridad del evento document.onload. document.onload se activa más tarde de lo que el DOM está listo (solo cuando todas las imágenes hayan terminado de cargarse) por lo que solo se utiliza como un respaldo en caso de que los eventos anteriores no funcionen por algún motivo.
Si pasas algún tiempo buscando en Google, encontrarás el código para hacer esto. Me imagino que el código más comprobado para hacer esto es en los grandes frameworks como jQuery y YUI, así que, incluso si no estoy usando ese framework, busco en el código fuente de las técnicas.
Aquí está la parte principal de la fuente de jQuery 1.6.2 para document.ready() :
bindReady: function() {
if ( readyList ) {
return;
}
readyList = jQuery._Deferred();
// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
return setTimeout( jQuery.ready, 1 );
}
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// A fallback to window.onload, that will always work
window.addEventListener( "load", jQuery.ready, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", DOMContentLoaded );
// A fallback to window.onload, that will always work
window.attachEvent( "onload", jQuery.ready );
// If IE and not a frame
// continually check to see if the document is ready
var toplevel = false;
try {
toplevel = window.frameElement == null;
} catch(e) {}
if ( document.documentElement.doScroll && toplevel ) {
doScrollCheck();
}
}
},
Si confiar en document.readyState está bien, solución rápida y sucia con sondeo:
(function() {
var state = document.readyState;
if(state === ''interactive'' || state === ''complete'') {
// do stuff
}
else setTimeout(arguments.callee, 100);
})();