Oldal: DOMContentLoaded, load, beforeunload, unload

A HTML-oldal életciklusának három fontos eseménye van:

• DOMContentLoaded – a böngésző teljesen betöltötte a HTML-t, és a DOM fa felépül, de a külső erőforrások, például a képek <img> és a stíluslapok még nem töltődtek be.
• load – nemcsak a HTML van betöltve, hanem az összes külső erőforrás is: képek, stílusok stb.
• beforeunload/unload – a a felhasználó elhagyja az oldalt.

Minden esemény hasznos lehet:

• DOMContentLoaded esemény – a DOM készen áll , így a kezelő megkeresheti a DOM csomópontokat, inicializálhatja az interfészt.
• load esemény – külső erőforrások vannak betöltve, így stílusok kerülnek alkalmazásra, képméretek ismertek stb.
• beforeunload esemény – a felhasználó távozik: ellenőrizhetjük, hogy a felhasználó elmentette-e a módosításokat, és megkérdezhetjük, hogy valóban el akarnak-e hagyni.
• – a felhasználó majdnem távozott, de még mindig kezdeményezhetünk néhány műveletet, például statisztikák küldését.

Fedezzük fel ezen események részleteit.

DOMContentLoaded

A DOMContentLoaded esemény a document objektumon történik.

Mi a addEventListener használatával kell elkapnia:

Például:

A példában a DOMContentLoaded kezelő a dokumentum betöltésekor fut, így az összes elemet láthatja, beleértve az alábbi <img> -t.

De ez nem várja meg a kép betöltését. Tehát a alert nulla méretet mutat.

Első látásra a DOMContentLoaded esemény nagyon egyszerű. A DOM fa készen áll – íme az esemény. Kevés a sajátosság.

DOMContentLoaded és szkriptek

Amikor a böngésző feldolgoz egy HTML-dokumentumot, és rábukkan egy <script> címkére, akkor végre kell hajtani, mielőtt folytatnánk a DOM felépítését. Ez elővigyázatosság, mivel a szkriptek módosíthatják a DOM-ot, sőt document.write is, így DOMContentLoaded várni kell.

Tehát a DOMContentLoaded feltétlenül az ilyen szkriptek után következik be:

A fenti példában először a „Library loading…”, majd a „DOM ready!” üzenetet látjuk. (az összes szkript futtatásra kerül).

DOMContentLoaded és stílusok

A külső stíluslapok nem befolyásolják a DOM-ot, ezért a DOMContentLoaded nem várja meg őket.

De van buktató. Ha van egy szkriptünk a stílus után, akkor a szkriptnek meg kell várnia, amíg a stíluslap betöltődik:

Ennek az az oka, hogy a szkript szeretné megszerezni az elemek koordinátáit és más stílusfüggő tulajdonságait, például a fenti példa. Természetesen meg kell várnia a stílusok betöltését.

Amint DOMContentLoaded vár a szkriptekre, most már a stílusokat is megvárja előttük.

Beépített böngésző automatikus kitöltés

Firefox, Chrome és Opera automatikus kitöltési űrlapok a DOMContentLoaded oldalon.

Például, ha az oldal rendelkezik űrlap bejelentkezéssel és jelszóval, és a böngésző megjegyezte az értékeket, majd a DOMContentLoaded oldalon megpróbálhatja automatikusan kitölteni őket (ha a felhasználó jóváhagyja).

Tehát ha A DOMContentLoaded -t hosszú betöltésű szkriptek elhalasztják, majd az automatikus kitöltés is vár. Valószínűleg látta, hogy egyes webhelyeken (ha a böngésző automatikus kitöltését használja) – a bejelentkezési / jelszó mezők nem töltődnek be azonnal, de késik az oldal teljes betöltése. Ez valójában a késleltetés a DOMContentLoaded eseményig.

window.onload

A load esemény az window objektumon vált ki, amikor az egész oldal, beleértve a stílusokat, képeket és más erőforrásokat, betöltődik. Ez az esemény a onload tulajdonságon keresztül érhető el.

Az alábbi példa helyesen mutatja a képméreteket, mert window.onload várja összes kép:

window.onunload

Amikor egy látogató elhagyja az oldalt, a unload esemény elindul a . Tehetünk ott valamit, amely nem jár késéssel, például bezárhatjuk a kapcsolódó felugró ablakokat.

A figyelemre méltó kivétel az elemzés küldése.

Tegyük fel, hogy adatokat gyűjtünk az oldal állapotáról. használt: egérkattintások, görgetések, megtekintett oldalterületek stb.

Természetesen a unload esemény az, amikor a felhasználó elhagy minket, és szeretnénk mentse az adatokat a szerverünkre.

Az adatokat a háttérben küldi el.A másik oldalra való áttérés nem késik: a böngésző elhagyja az oldalt, de mégis végrehajtja a (z) sendBeacon műveletet.

A használat módja:

• A kérést POST-ként küldjük.
• Nem csak karaktersorozatot, hanem űrlapokat és más formátumokat is küldhetünk, a Fetch fejezetben leírtak szerint, de általában ez egy szigorított objektum.
• Az adatokat 64 KB korlátozza.

Amikor a sendBeacon kérelem befejeződött, a böngésző valószínűleg már elhagyta a dokumentumot, tehát nincs mód a szerver válaszának megszerzésére (ami az elemzéshez általában üres).

Van egy keepalive jelző is az ilyen “oldal után balra” kérések végrehajtásához. az általános hálózati kérelmek lekérési metódusában. További információt a API lehívása című fejezetben talál.

Ha meg akarjuk szakítani az áttérést egy másik oldalra, akkor itt nem tudjuk megtenni. De használhatunk egy másikat esemény – onbeforeunload.

window.onbeforeunload

Ha a látogató navigációt kezdeményezett aw az oldalról, vagy megpróbálja bezárni az ablakot, a beforeunload kezelő további megerősítést kér.

Ha lemondjuk az eseményt, a böngésző megkérdezheti a látogatót, hogy biztosak benne.

Kipróbálhatja a kód futtatásával, majd az oldal újratöltésével:

Történelmi okokból a nem üres karakterlánc visszaadása is törlésnek számít az esemény. Néhány évvel ezelőtt a böngészők szokták üzenetként megjeleníteni, de ahogy a modern specifikáció mondja, nem kellene.

Íme egy példa:

A viselkedés megváltozott , mert néhány webmester félrevezető és idegesítő üzenetek megjelenítésével bántalmazta ezt az eseménykezelőt. Tehát jelenleg a régi böngészők továbbra is üzenetként jeleníthetik meg, de ettől eltekintve – nincs mód a felhasználó számára megjelenített üzenet testreszabására.

readyState

Mi történik, ha beállítjuk a DOMContentLoaded kezelő a dokumentum betöltése után?

Természetesen soha nem fut.

Vannak esetek, amikor nem vagyunk biztosak abban, hogy a a dokumentum készen áll vagy sem. Szeretnénk, ha a DOM betöltésekor a funkciónk végre kellene hajtani, legyen az most vagy később.

A document.readyState tulajdonság elmondja nekünk az aktuális betöltési állapotot.

Három lehetséges érték létezik:

• "loading" – a dokumentum betöltődik.
• "interactive" – a dokumentum teljes elolvasása megtörtént.
• "complete" – a dokumentum teljesen le lett olvasva, és minden erőforrás (például képek) be lett töltve is.

Tehát ellenőrizhetjük a document.readyState fájlt, beállíthatunk egy kezelőt, vagy azonnal végrehajthatjuk a kódot, ha kész.

Van az állapot megváltozásakor kiváltó readystatechange esemény is, így ezeket az állapotokat így tudjuk kinyomtatni:

A readystatechange event a dokumentum betöltési állapotának követésének alternatív mechanikája, már régen megjelent. Manapság ritkán használják.

Lássuk a teljes eseményfolyamatot a teljesség érdekében.

Íme egy dokumentum, amelynek <iframe>, <img> és az eseményeket naplózó kezelők:

A működő példa a homokozóban található.

A tipikus kimenet:

A a szögletes zárójelben szereplő számok annak körülbelüli időpontját jelzik, amikor megtörténik. Az azonos számjeggyel ellátott események nagyjából egyidőben történnek (± néhány ms).

• document.readyState lesz interactive közvetlenül a DOMContentLoaded előtt. Ez a két dolog valójában ugyanazt jelenti.
• document.readyState complete lesz, amikor az összes erőforrás (iframe és img) betöltődik. Itt láthatjuk, hogy ez körülbelül ugyanabban az időben történik, mint img.onload (img az utolsó erőforrás) és window.onload. complete állapotra váltás ugyanazt jelenti, mint window.onload. A különbség az, hogy a window.onload mindig minden más load kezelő után működik.

Összefoglalás

Oldalbetöltési események:

• A DOMContentLoaded esemény kiváltja a document fájlt, amikor a DOM kész. Ebben a szakaszban alkalmazhatjuk a JavaScript-et az elemekre.
  • Az olyan szkript, mint a <script>https://javascript.info/...</script> vagy a <script src="https://javascript.info/..."></script> blokkolja a DOMContentLoaded elemet, a böngésző vár hogy végre tudják hajtani őket.
  • A képek és más források továbbra is folytatódhatnak.
• A load Az esemény az window eseményen vált ki, amikor az oldal és az összes erőforrás betöltődik. Ritkán használjuk, mert általában nem kell ilyen sokáig várni.
• A beforeunload esemény az window oldalon vált ki, amikor a felhasználó el akarja hagyni az oldalt. Ha töröljük az eseményt, a böngésző megkérdezi, hogy a felhasználó valóban el akar-e hagyni (pl. Vannak nem mentett változtatásaink).
• A unload esemény a akkor vált ki, amikor a felhasználó végre távozik, a kezelőben csak egyszerű dolgokat tehetünk, amelyek nem járnak késéssel vagy felhasználó megkérdezésével. E korlátozás miatt ritkán használják. Küldhetünk hálózati kérelmet a következővel: navigator.sendBeacon.
• document.readyState a dokumentum aktuális állapota, a változtatások nyomon kell követni a readystatechange eseményben:
  • loading – a dokumentum betöltődik.
  • interactive – a dokumentum elemezve van, nagyjából ugyanabban az időben történik, mint a DOMContentLoaded, de előtte.
  • complete – a dokumentum és az erőforrások betöltődnek, körülbelül ugyanabban az időben történik, mint a window.onload, de előtte.