Stránka: DOMContentLoaded, load, beforeunload, unload

Životní cyklus stránky HTML má tři důležité události:

• DOMContentLoaded – prohlížeč plně načte HTML a je vytvořen strom DOM, ale externí zdroje, jako jsou obrázky <img> a styly, se možná ještě nenačetly.
• load – načte se nejen HTML, ale také všechny externí zdroje: obrázky, styly atd.
• beforeunload/unload – uživatel stránku opouští.

Každá událost může být užitečná:

• DOMContentLoaded událost – DOM je připraven , aby obslužný program mohl vyhledat uzly DOM, inicializovat rozhraní.
• load událost – načtou se externí zdroje, takže se použijí styly, velikosti obrázků atd.
• beforeunload událost – uživatel odchází: můžeme zkontrolovat, zda uživatel změny uložil, a zeptat se ho, zda opravdu chce odejít.
• – uživatel téměř odešel, ale stále můžeme zahájit některé operace, například zasílat statistiky.

Pojďme se podívat na podrobnosti těchto událostí.

DOMContentLoaded

Událost DOMContentLoaded se stane u objektu document.

My k jeho zachycení musíte použít addEventListener:

Například:

V příkladu se obslužný program DOMContentLoaded spustí, když je dokument načten, takže vidí všechny prvky, včetně <img> níže.

Nečeká však na načtení obrázku. Takže alert zobrazuje nulové velikosti.

Na první pohled je událost DOMContentLoaded velmi jednoduchá. Strom DOM je připraven – tady je událost. Existuje však několik zvláštností.

DOMContentLoaded a skripty

Když prohlížeč zpracovává dokument HTML a narazí na značku <script>, je třeba provést před pokračováním v budování DOM. Je to preventivní opatření, protože skripty mohou chtít upravit DOM a dokonce do něj document.write, takže DOMContentLoaded musí počkat.

Takže DOMContentLoaded se po takových skriptech rozhodně stane:

Ve výše uvedeném příkladu nejprve vidíme „Knihovna načtena …“ a poté „DOM připraven!“ (všechny skripty jsou spuštěny).

DOMContentLoaded a styly

Externí šablony stylů neovlivňují DOM, takže DOMContentLoaded na ně nečeká.

Ale existuje nástraha. Pokud máme po stylu skript, musí tento skript počkat, než se načte seznam stylů:

Důvodem je to, že skript může chtít získat souřadnice a další vlastnosti prvků závislé na stylu, například v příklad výše. Přirozeně musí čekat na načtení stylů.

Protože DOMContentLoaded čeká na skripty, nyní také čeká na styly před nimi.

Integrované automatické vyplňování prohlížeče

Automatické vyplňování formulářů Firefox, Chrome a Opera v DOMContentLoaded.

Například pokud má stránka formulář s přihlašovacím jménem a heslem a prohlížeč si tyto hodnoty zapamatoval, poté se je může DOMContentLoaded pokusit o automatické vyplnění (pokud to uživatel schválí).

Takže pokud DOMContentLoaded se odkládá skripty s dlouhým načítáním, pak také čeká automatické vyplňování. Pravděpodobně jste to viděli na některých webech (pokud používáte automatické vyplňování prohlížeče) – pole pro přihlášení / heslo se nevyplňují okamžitě, ale do úplného načtení stránky existuje zpoždění. To je ve skutečnosti zpoždění do události DOMContentLoaded.

window.onload

load událost v objektu window se spustí, když je načtena celá stránka, včetně stylů, obrázků a dalších zdrojů. Tato událost je k dispozici prostřednictvím vlastnosti onload.

Následující příklad správně ukazuje velikosti obrázků, protože window.onload čeká na všechny obrázky:

window.onunload

Když návštěvník opustí stránku, spustí se událost unload na window. Můžeme tam udělat něco, co nezahrnuje zpoždění, například zavírání souvisejících vyskakovacích oken.

Pozoruhodná výjimka je zasílání analytických údajů.

Řekněme, že shromažďujeme údaje o tom, jak je stránka na tom používá se: kliknutí myší, posouvání, prohlížené oblasti stránek atd.

Událost unload přirozeně znamená, že nás uživatel opustí, a my bychom rádi ukládat data na náš server.

Odesílá data na pozadí.Přechod na jinou stránku se nezdržuje: prohlížeč stránku opustí, ale přesto provede sendBeacon.

Jak to použít:

• Požadavek je odeslán jako POST.
• Můžeme odeslat nejen řetězec, ale také formuláře a další formáty, jak je popsáno v kapitole Načíst, ale obvykle se jedná o strifikovaný objekt.
• Data jsou omezena na 64 kB.

Po dokončení požadavku sendBeacon prohlížeč pravděpodobně již dokument opustil, takže neexistuje způsob, jak získat odpověď serveru (která je pro analytiku obvykle prázdná).

K dispozici je také příznak keepalive pro provádění takových požadavků „po levé straně“ v metodě načítání pro obecné síťové požadavky. Více informací naleznete v kapitole Fetch API.

Pokud chceme zrušit přechod na jinou stránku, nemůžeme to zde udělat. Můžeme však použít jinou událost – onbeforeunload.

window.onbeforeunload

Pokud návštěvník zahájil navigaci aw ay ze stránky nebo se pokusí zavřít okno, obsluha beforeunload požádá o další potvrzení.

Pokud událost zrušíme, může se prohlížeč zeptat návštěvníka, zda jsou si jistí.

Můžete to zkusit spuštěním tohoto kódu a následným načtením stránky:

Z historických důvodů se vrácení neprázdného řetězce počítá také jako zrušení událost. Před nějakou dobou to prohlížeče zobrazovaly jako zprávu, ale jak říká moderní specifikace, neměly by.

Zde je příklad:

Chování bylo změněno , protože někteří webmasteři zneužili tuto obslužnou rutinu události zobrazováním zavádějících a otravných zpráv. Takže právě teď to staré prohlížeče mohou zobrazit jako zprávu, ale kromě toho – neexistuje způsob, jak přizpůsobit zprávu zobrazenou uživateli.

readyState

Co se stane, když nastavíme obslužná rutina DOMContentLoaded po načtení dokumentu?

Přirozeně se to nikdy nespustí.

Existují případy, kdy si nejsme jisti, zda dokument je připraven nebo ne. Chtěli bychom, aby se naše funkce spustila při načtení modelu DOM, ať už nyní nebo později.

Vlastnost document.readyState nám říká o aktuálním stavu načítání.

Existují 3 možné hodnoty:

• "loading" – dokument se načítá.
• "interactive" – dokument byl plně přečten.
• "complete" – dokument byl plně přečten a jsou načteny všechny zdroje (například obrázky) také.

Můžeme tedy zkontrolovat document.readyState a nastavit obslužnou rutinu nebo okamžitě spustit kód, pokud je připraven.

Existuje také událost readystatechange, která se spustí při změně stavu, takže můžeme všechny tyto stavy vytisknout takto:

readystatechange je alternativní mechanikou sledování stavu načítání dokumentu, zdálo se to už dávno. V dnešní době se používá jen zřídka.

Podívejme se na úplnost celé události.

Zde je dokument s <iframe>, <img> a obslužné rutiny, které zaznamenávají události:

Pracovní příklad je v karanténě.

Typický výstup:

čísla v hranatých závorkách označují přibližný čas, kdy k tomu dojde. Události označené stejnou číslicí se odehrávají přibližně ve stejnou dobu (± několik ms).

• document.readyState se stává interactive těsně před DOMContentLoaded. Tyto dvě věci ve skutečnosti znamenají totéž.
• document.readyState se stává complete, když všechny zdroje (iframe a img) jsou načteny. Zde vidíme, že k tomu dochází přibližně ve stejnou dobu jako img.onload (img je poslední zdroj) a window.onload. Přepnutí do complete stavu znamená totéž jako window.onload. Rozdíl je v tom, že window.onload vždy funguje po všech ostatních load manipulátorech.

Shrnutí

Události načtení stránky:

• Událost DOMContentLoaded se spustí při document, když je DOM připraven. V této fázi můžeme na prvky použít JavaScript.
  • Skript, například <script>https://javascript.info/...</script> nebo <script src="https://javascript.info/..."></script> blok DOMContentLoaded, prohlížeč čeká pro provádění.
  • Obrázky a další zdroje se také mohou i nadále načítat.
• load událost na window se spustí při načtení stránky a všech zdrojů. Používáme jej jen zřídka, protože obvykle není nutné čekat tak dlouho.
• Událost beforeunload na window se spustí, když chce uživatel stránku opustit. Pokud událost zrušíme, prohlížeč se zeptá, zda chce uživatel skutečně odejít (např. Máme neuložené změny).
• Událost unload v window se spustí, když uživatel konečně odejde, v obslužné rutině můžeme dělat pouze jednoduché věci, které nezahrnují zpoždění nebo dotazování uživatele. Z důvodu tohoto omezení se používá jen zřídka. Můžeme odeslat požadavek na síť s navigator.sendBeacon.
• document.readyState je aktuální stav dokumentu, změny lze být sledován v události readystatechange:
  • loading – dokument se načítá.
  • interactive – dokument je analyzován, probíhá přibližně ve stejnou dobu jako DOMContentLoaded, ale před ním.
  • complete – dokument a zdroje jsou načteny, probíhá zhruba ve stejnou dobu jako window.onload, ale před ním.