Side: DOMContentLoaded, load, before unload, unload

Livscyklussen for en HTML-side har tre vigtige begivenheder:

• DOMContentLoaded – browserens fuldt indlæste HTML, og DOM-træet er bygget, men eksterne ressourcer som billeder <img> og stylesheets er muligvis endnu ikke indlæst.
• load – ikke kun HTML er indlæst, men også alle de eksterne ressourcer: billeder, stilarter osv.
• beforeunload/unload – brugeren forlader siden.

Hver begivenhed kan være nyttig:

• DOMContentLoaded begivenhed – DOM er klar , så handleren kan slå op i DOM-noder, initialisere grænsefladen.
• load begivenhed – eksterne ressourcer indlæses, så typografier anvendes, billedstørrelser er kendt osv.
• beforeunload begivenhed – brugeren forlader: vi kan kontrollere, om brugeren gemte ændringerne og spørge dem, om de virkelig ønsker at forlade.
• – brugeren er næsten gået, men vi kan stadig starte nogle operationer, såsom at sende statistik.

Lad os undersøge detaljerne i disse begivenheder.

DOMContentLoaded

DOMContentLoaded begivenheden sker på document -objektet.

Vi skal bruge addEventListener for at fange det:

For eksempel:

I eksemplet kører DOMContentLoaded -handleren, når dokumentet indlæses, så det kan se alle elementerne, inklusive <img> nedenfor.

Men det venter ikke på, at billedet indlæses. Så alert viser nul størrelser.

Ved første øjekast er DOMContentLoaded begivenheden meget enkel. DOM-træet er klar – her er begivenheden. Der er dog kun få særheder.

DOMContentLoaded og scripts

Når browseren behandler et HTML-dokument og støder på et <script> -tag, er det skal udføres, inden du fortsætter med at bygge DOM. Det er en forholdsregel, da scripts måske vil ændre DOM, og endda document.write i det, så DOMContentLoaded er nødt til at vente.

Så DOMContentLoaded sker bestemt efter sådanne scripts:

I eksemplet ovenfor ser vi først “Biblioteket indlæst …” og derefter “DOM klar!” (alle scripts udføres).

DOMContentLoaded og styles

Eksterne stilark påvirker ikke DOM, så DOMContentLoaded venter ikke på dem.

Men der er en faldgrube. Hvis vi har et script efter stilen, skal scriptet vente, indtil stilarket indlæses:

Årsagen til dette er, at scriptet måske ønsker at få koordinater og andre stilafhængige egenskaber for elementer, som i eksemplet ovenfor. Det skal naturligvis vente på, at stilarter indlæses.

Da DOMContentLoaded venter på scripts, venter det nu også på stilarter før dem.

Indbygget browser autofyld

Firefox, Chrome og Opera autofyld formularer på DOMContentLoaded.

Hvis f.eks. siden har en form med login og adgangskode, og browseren huskede værdierne, så på DOMContentLoaded kan den prøve at autofylde dem (hvis de er godkendt af brugeren).

Så hvis DOMContentLoaded udskydes med langindlæste scripts, så venter også autofyldning. Du så sandsynligvis, at på nogle websteder (hvis du bruger browserudfyldning) – felterne til login / adgangskode bliver ikke automatisk udfyldt med det samme, men der er en forsinkelse, indtil siden er fuldt indlæst. Det er faktisk forsinkelsen indtil DOMContentLoaded begivenheden.

window.onload

load begivenhed på window objektet udløses, når hele siden indlæses inklusive stilarter, billeder og andre ressourcer. Denne begivenhed er tilgængelig via onload egenskaben.

Eksemplet nedenfor viser korrekt billedstørrelser, fordi window.onload venter på alle billeder:

window.onunload

Når en besøgende forlader siden, udløses begivenheden unload på window. Vi kan gøre noget der, der ikke involverer en forsinkelse, som at lukke relaterede popup-vinduer.

Den bemærkelsesværdige undtagelse er at sende analyser.

Lad os sige, at vi samler data om, hvordan siden er brugt: museklik, ruller, viste sideområder osv.

Naturligvis er unload begivenhed, når brugeren forlader os, og vi vil gerne gem dataene på vores server.

Det sender dataene i baggrunden.Overgangen til en anden side er ikke forsinket: browseren forlader siden, men udfører stadig sendBeacon.

Sådan bruges den:

• Forespørgslen sendes som POST.
• Vi kan ikke kun sende en streng, men også formularer og andre formater, som beskrevet i kapitlet Hent, men normalt er det et strenget objekt.
• Dataene er begrænset med 64 kb.

Når sendBeacon anmodningen er afsluttet, har browseren sandsynligvis allerede forladt dokumentet, så der er ingen måde at få serverrespons (som normalt er tom til analyse).

Der er også et keepalive -flag til at udføre sådanne “efter-side-venstre” anmodninger i hentningsmetode til generiske netværksanmodninger. Du kan finde flere oplysninger i kapitlet Hent API.

Hvis vi vil annullere overgangen til en anden side, kan vi ikke gøre det her. Men vi kan bruge en anden begivenhed – onbeforeunload.

vindue. før download

Hvis en besøgende startede navigationen aw ay fra siden eller forsøger at lukke vinduet, beforeunload handler beder om yderligere bekræftelse.

Hvis vi annullerer begivenheden, kan browseren muligvis bede den besøgende om de er sikre.

Du kan prøve det ved at køre denne kode og derefter genindlæse siden:

Af historiske årsager tælles også returnering af en ikke-tom streng som annullering begivenheden. For nogen tid siden brugte browsere det som en besked, men som den moderne specifikation siger, burde de ikke.

Her er et eksempel:

Adfærden blev ændret , fordi nogle webmastere misbrugte denne begivenhedshåndterer ved at vise vildledende og irriterende meddelelser. Så lige nu viser gamle browsere det muligvis stadig som en besked, men bortset fra det – der er ingen måde at tilpasse den meddelelse, der vises til brugeren.

readyState

Hvad sker der, hvis vi indstiller DOMContentLoaded -håndtereren, efter at dokumentet er indlæst?

Naturligvis kører det aldrig.

Der er tilfælde, hvor vi ikke er sikre på, om dokumentet er klar eller ej. Vi vil gerne have, at vores funktion udføres, når DOM er indlæst, det være sig nu eller senere.

document.readyState egenskaben fortæller os om den aktuelle indlæsningstilstand.

Der er 3 mulige værdier:

• "loading" – dokumentet indlæses.
• "interactive" – dokumentet blev fuldt læst.
• "complete" – dokumentet blev fuldt læst, og alle ressourcer (som billeder) indlæses også.

Så vi kan kontrollere document.readyState og konfigurere en handler eller udføre koden med det samme, hvis den er klar.

Der er også readystatechange begivenheden, der udløses, når staten ændres, så vi kan udskrive alle disse tilstande sådan:

readystatechange begivenhed er en alternativ mekanik til at spore dokumentets indlæsningstilstand, det dukkede op for længe siden. I dag bruges det sjældent.

Lad os se de fulde begivenheder flyde for fuldstændigheden.

Her er et dokument med <iframe>, <img> og handlere, der logger begivenheder:

Arbejdseksemplet er i sandkassen.

Den typiske output:

tal i firkantede parenteser angiver den omtrentlige tid for, hvornår det sker. Begivenheder mærket med det samme ciffer sker omtrent på samme tid (± et par ms).

• document.readyState bliver interactive lige før DOMContentLoaded. Disse to ting betyder faktisk det samme.
• document.readyState bliver complete når alle ressourcer (iframe og img) er indlæst. Her kan vi se, at det sker omtrent på samme tid som img.onload (img er den sidste ressource) og window.onload. At skifte til complete tilstand betyder det samme som window.onload. Forskellen er, at window.onload altid fungerer efter alle andre load -handlere.

Oversigt

Sideindlæsningsbegivenheder:

• DOMContentLoaded begivenheden udløses på document når DOM er parat. Vi kan anvende JavaScript på elementer på dette tidspunkt.
  • Script som <script>https://javascript.info/...</script> eller <script src="https://javascript.info/..."></script> blokerer DOMContentLoaded, browseren venter for dem at udføre.
  • Billeder og andre ressourcer kan også fortsat indlæses.
• load begivenhed på window udløses, når siden og alle ressourcer indlæses. Vi bruger sjældent det, fordi det normalt ikke er nødvendigt at vente så længe.
• beforeunload begivenheden på window udløses, når brugeren vil forlade siden. Hvis vi annullerer begivenheden, spørger browseren, om brugeren virkelig ønsker at forlade (f.eks. Har vi ikke gemte ændringer).
• unload begivenheden på window udløser, når brugeren endelig forlader, i handleren kan vi kun gøre enkle ting, der ikke involverer forsinkelser eller beder en bruger. På grund af denne begrænsning bruges den sjældent. Vi kan sende en netværksanmodning med navigator.sendBeacon.
• document.readyState er dokumentets aktuelle tilstand, ændringer kan spores i readystatechange begivenheden:
  • loading – dokumentet indlæses.
  • interactive – dokumentet parses, sker omtrent på samme tid som DOMContentLoaded, men før det.
  • complete – dokumentet og ressourcerne indlæses, sker omtrent på samme tid som window.onload, men før det.