Kdy je `document`/stránka dostupná z JavaScriptu

Článek jen rychle shrnuje události DOMContentLoaded (v document), load (ve window) a Vanilla JavaScript „alternativu” k $(document).ready().

Chci jen $(document).ready()

Stačí přejít na [docReady].



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17



<html>
    <head>
        <meta charset="utf-8">
        <script>
            window.addEventListener("load",
                ()=> void(el.textContent= "Nadpis změněn") );
        </script>
    </head>
    <body>
        <script>
            var el;
            document.addEventListener("DOMContentLoaded",
                ()=> void(el= document.getElementById("test") ));
        </script>
        <h1 id="test">Nadpis</h1>
    </body>
</html>

Spíše pseudokód demonstrující, kdy se která událost fakticky volá.

Průřez

document událost DOMContentLoaded je volána v situaci, kdy bylo zparsováno HTML (tj. je dostuplný DOM), zatímco window událost load je volána až jsou zpracovány i externí zdroje.

Tip: Naslouchač na load událost lze zaregistrovat i: 
<body onload="…">
document.body.onload= /* funkce */;

V ukázce, když prohlížeč zpracuje stránku zavolá funkci pro uložení elementu el, následně volá dříve definovanou funkci pro změnu textu.

Pro praktické použití je lepší umožnit také inicializaci našeho kódu (či knihovny) až na vyžádání. Tedy, pomocí [readyState] zkontrolovat, zda již požadované události nenastaly a případně až podom navěsit naslouchač.



1
2
3
4
5
6
7



(function knihovna(d){
    if(d.readyState!=="loading") return void(main());
    d.addEventListener("DOMContentLoaded", main);

    function main(){ /* … */ }
    /* … */
})(document);

Jen ukázka podmíněného navěšení DOMContentLoaded události dle document.readyState.

Knihovna [docReady] toto bere v potaz, navíc přidává podporu pro straší prohlížeče. Primárně pracuje s událostí DOMContentLoaded, load je jen fallback!

Reference

  1. [DOMContentLoaded] MDN dokumentace k `DOMContentLoaded`
  2. [load] MDN dokumentace k `window.onload`
  3. [readyState] MDN dokumentace k `document.readyState` – Indikuje status stránky – "loading"= stále se parsuje, "interactive"= DOM již přístupný (srovnej s DOMContentLoaded) a "complete"= hotovo (srovnej s load).
  4. [docReady] Knihovna zobecňující `DOMContentLoaded` událost – Například „zfunkčnění” i na starších prohlížečích. Měla by fungovat po vzoru jQuery kódu: $(document).ready().