tag - javascript domready?

title of page html

Question

Sé que puedo usar diferentes frameworks como prototype o jquery para adjuntar una función a window.onload, pero no es lo que estoy buscando.

Necesito algo como .readyState para poder hacer algo como esto:

if(document.isReady){
  var id = document.getElem ...
}

¿Hay alguna otra manera que usar lo que hacen los marcos?

Answer 1

En los 5 años transcurridos desde que se formuló esta pregunta, DOMContentLoaded se ha convertido en un evento universalmente admitido, y puedes usarlo.

document.addEventListener(''DOMContentLoaded'', function() {
    //.. do stuff ..
}, false);

Answer 2

Esta es en realidad una de las razones más importantes por las que la mayoría de la gente usa frameworks como jQuery porque la solución no es consistente en todos los navegadores.

Answer 3

He actualizado el código de la biblioteca DOMAssistant , funciona bien conmigo

var domReady = (function (){
  var arrDomReadyCallBacks = [] ;
  function excuteDomReadyCallBacks(){
       for (var i=0; i < arrDomReadyCallBacks.length; i++) {
         arrDomReadyCallBacks[i]();
       }
       arrDomReadyCallBacks = [] ;
  }

  return function (callback){
    arrDomReadyCallBacks.push(callback);
     /* Mozilla, Chrome, Opera */
      if (document.addEventListener ) {
          document.addEventListener(''DOMContentLoaded'', excuteDomReadyCallBacks, false);
      }
    /* Safari, iCab, Konqueror */
    if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
        browserTypeSet = true ;
        var DOMLoadTimer = setInterval(function () {
            if (/loaded|complete/i.test(document.readyState)) {
                //callback();
                excuteDomReadyCallBacks();
                clearInterval(DOMLoadTimer);
            }
        }, 10);
    }
    /* Other web browsers */

    window.onload = excuteDomReadyCallBacks;
}
})()

Answer 4

Mira esta demostración de microsoft. -> http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html Y aquí está la esencia del código que le permite ejecutar JS en DOM listo ...

(function () {
    function load2(){
        // put whatever you need to load on DOM ready in here
        document.getElementById("but3").addEventListener("click", doMore, false);
    }
    if (window.addEventListener) {
        window.addEventListener(''DOMContentLoaded'', load2, false);
    } else {
        window.attachEvent(''onload'', load2);
    }
} ());

Aquí está la fuente de JavaScript para la demostración. http://ie.microsoft.com/testdrive/Includes/Script/ReturnAndShareControls.js

Funciona bien. Agradable !! .. en Google Chrome e IE 9.

Answer 5

Prueba esto:
Enlace: onDomReady en GitHub o la fuente a continuación:

if(document.ondomready == undefined) {
    document.ondomready = {};
    document.ondomready = null;
} else {
    document.ondomready=document.ondomready;
}
var oldonload=document.onload;
var isLaunched = 0;
document.onload = function() {  
    if(oldonload !== null) {
        oldonload.call();
    }
};
document.addEventListener("DOMContentLoaded", function onDom(evt) {
    var olddomready = document.ondomready;
    if(olddomready !== null) {
        if(isLaunched == 0) {
            olddomready.call(evt);
            isLaunched == 1;
            //We now launched the mapped DOMContentLoaded Event
        } else {
            //We already launched DOMContentLoaded Event
        }
    }
}, false);

Ya he probado esto en Opera 11.x / 12.x. Todavía no probado en otros. Avísame si lo hacen.

Nota: aún no he cargado el repositorio, pero pronto lo haré en mi tiempo libre.

Answer 6

Si bien generalmente defiendo evitar el uso de marcos a menos que sea necesario, diría que usar uno en este caso está perfectamente bien. Aquí está jQuery:

$(function () {
    // do stuff after DOM has loaded
});

Tenga en cuenta que NO es lo mismo que un evento window.onload , ya que onload ejecuta primero después de que se hayan cargado otros recursos (imágenes, etc.) El código que utilicé en mi ejemplo se ejecutará cuando el DOM haya terminado de cargarse, es decir, cuando esté completo. La estructura HTML está disponible (no necesariamente cuando las imágenes, CSS, etc. están disponibles).

Si desea una variable verificable, puede configurar una en la función listo:

var documentIsReady = false;
$(function () { documentIsReady = true; });

Por supuesto, puede encontrar bibliotecas aún más livianas que jQuery si todo lo que quiere hacer es comprobar si está listo para DOM. Pero use una biblioteca en los casos en que diferentes navegadores se comporten de manera muy diferente (este es uno de esos casos).

Usando algún código de la biblioteca DOMAssistant , hacer que su propia función "DOM esté lista" no debería ser demasiado difícil:

var domLoaded = function (callback) {
    /* Internet Explorer */
    /*@cc_on
    @if (@_win32 || @_win64)
        document.write(''<script id="ieScriptLoad" defer src="//:"><//script>'');
        document.getElementById(''ieScriptLoad'').onreadystatechange = function() {
            if (this.readyState == ''complete'') {
                callback();
            }
        };
    @end @*/
    /* Mozilla, Chrome, Opera */
    if (document.addEventListener) {
        document.addEventListener(''DOMContentLoaded'', callback, false);
    }
    /* Safari, iCab, Konqueror */
    if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
        var DOMLoadTimer = setInterval(function () {
            if (/loaded|complete/i.test(document.readyState)) {
                callback();
                clearInterval(DOMLoadTimer);
            }
        }, 10);
    }
    /* Other web browsers */
    window.onload = callback;
};

No probado, pero debería funcionar. Lo simplifiqué de DOMAssistant, porque DOMAssistant permite múltiples devoluciones de llamada y se ha verificado para asegurarse de que no se puede agregar la misma función dos veces, etc.

Answer 7

Si quieres libs más pequeños que solo hacen cosas particulares, puedes usar libs en microjs . Para la pregunta en cuestión, se puede usar el método DOMStatic libs ready.

Answer 8

jQuery no usa window.onload .

$(document).ready() espera hasta que DOM se haya cargado y pueda atravesar (el resto del contenido puede o no cargarse en ese punto).

Si extraes la fuente de jQuery y clasificas el desorden, verás que el trabajo se realiza mediante el método bindReady() que tiene varias implementaciones diferentes para diferentes navegadores y solo cuando todas esas implementaciones fallan, se vuelven a escuchar para el evento de carga para la ventana.

Answer 9

Editar: A medida que nos llega el año 2018, creo que es seguro escuchar el evento DOMContentLoaded .

function fireOnReady() { /* ... */ }
if (document.readyState === ''complete'') {
    fireOnReady();
} else {
    document.addEventListener("DOMContentLoaded", fireOnReady);
}

Tenga en cuenta que el evento solo se activará una vez cuando se cargue su página. Si tiene que admitir buscadores realmente antiguos, entonces revise el guión superligero que puse a continuación.

Para referencia histórica solamente:

jQuery tiene una propiedad no documentada llamada isReady que se usa internamente para determinar si el evento listo para DOM ha sido activado:

if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}

Empecé en 1.5.2 volví hasta 1.3.2 y la propiedad está allí. Mientras no esté documentado, diría que puede confiar en esta propiedad en futuras versiones de jQuery. Editar: Y un año más tarde - v1.7.2, todavía usan $.isReady - aún no documentado, así que utilícelo bajo su propio riesgo. Tenga cuidado al actualizar.

Editar: v1.9, todavía usan $.isReady - aún no documentados

Editar: v2.0, con todos sus cambios "principales", todavía usa $.isReady - aún no documentado

Editar: v3.x aún usa $.isReady - aún no está documentado

Editar: como varias personas han señalado, lo anterior realmente no responde la pregunta. Así que acabo de crear un fragmento de mini listo para DOM que se inspiró en el fragmento de DOM listo aún más pequeño de Dustin Diaz. Dustin creó una manera ordenada de verificar el documento readyState con algo similar a esto:

if( !/in/.test(document.readyState) ) {
    // document is ready
} else {
    // document is NOT ready
}

La razón por la que esto funciona es porque el navegador tiene 3 estados de carga: "cargando", "interactivo" y "completo" (el viejo WebKit también usó "cargado", pero ya no tiene que preocuparse por eso) . Notarás que tanto "cargando" como "interactivo" contienen el texto "en" ... así que si la cadena "in" se encuentra dentro de document.readyState , entonces sabemos que todavía no estamos listos.

Answer 10

document.addEventListener("DOMContentLoaded", function(e){
    console.log("dom ready");//output to web browser console
});

no se necesita JQuery para esto. No es necesario pasar el 3er parámetro en un DOMContentLoaded ya que este evento no tiene padres para atravesar el evento. Además, no hay necesidad de entusiasmarse con lo que dicen los demás. Esto le dirá cuándo el DOM está completamente cargado y listo para usar. LOLEDO cuando noté el DOM asistente de lib. Esa lib es absolutamente inútil.

El evento DOMContentLoaded se activa cuando el documento se ha cargado y analizado por completo, sin esperar a que las hojas de estilo, imágenes y subtramas finalicen la carga

addEventListener() es una gran función para verificar cualquier evento, incluido el estado de DOM listo. Al utilizar "DOMContentLoaded", el tercer parámetro en addEventListener() no es necesario, ya que este desencadenador no tiene elemento principal para pasar el evento. En mi ejemplo anterior, notará que el segundo parámetro es una función anónima. También puede pasar el nombre de una función al segundo parámetro.

document.addEventListener([(string)event trigger], [function],[(boolean)traverse DOM tree]);

Otro beneficio de usar esto en JQuery es que esto no se romperá cuando actualice JQuery.