Hvordan kjøre en funksjon når siden er lastet inn i JavaScript?
Denne artikkelen vil bruke følgende metoder for å oppnå oppgaven for hånden:
- Bruke Onload -hendelse på Windows -grensesnittvariabelen
- Å sette en lastattributt inne i taggen
- Definere en tilpasset hendelseslytter på vindusgrensesnittvariabelen
- Ved hjelp av dokument.OnreadyStateChange -attributt
La oss starte med den første.
Metode 1: Window Onload Event
Onload () -hendelsen kan brukes med et hvilket som helst element i en HTML -side, og den vil utføre handlingene som er gitt inni den etter at elementet er fullastet. Å kjøre en funksjon bare etter helheten “vindu”Har blitt lastet, bruk“ vinduet.Onload ”-egenskaper i skriptfilen og angir den lik en funksjon som
vindu.onload = funksjon ()Varsel ("Side er lastet inn");
;
I funksjonen blir det sendt et varsel som sier at "Side er lastet". Utfør HTML -nettsiden og observer følgende resultater:
Det fremgår av utdataene at funksjonen ble utført etter at nettleseren fullt lastet webpestens "vindu".
Metode 2: Bruke Onload -attributtet med Body -taggen
Ettersom kroppskoden inkluderer alle disse dataene som vises i nettleseren, vil det å sette en funksjon på nettet i det vesentlige bety å utføre funksjonen etter at alt på nettsiden er fullastet.
Lag for eksempel en HTML -webside med disse linjene:
alt = ""
/>
Hvordan kjøre en funksjon når siden er lastet inn i JavaScript ?
Dette er et eksempel på kroppens pålastningsattributt
Det viktigste poenget her er at i kroppen har vi brukt attributtet onload = “fulllastet ()”. Dette vil føre til at nettsiden ser etter en "fulllastet()”Funksjon i skriptet etter at alle elementene på websiden er lastet.
Gå inne i skriptfilen, og legg til følgende linjer:
funksjon fullbelastet ()Varsel ("Nettsiden er fullstendig lastet!");
Utfør HTML, og utdataene på nettleseren vil se slik ut:
Brukeren blir bedt om etter kroppskoden, og alle elementene inne i kroppskoden er fullastet.
Metode 3: Legge til en hendelseslytter på "Window" -grensesnittvariabelen
En av de eldste metodene som fremdeles er effektive. I JavaScript -filen, bare legg til en hendelseslytter som bruker DOT -operatøren med vår "vindu”Grensesnittvariabel. Staten inne i arrangementets lytter vil være “laste”Og ved den tilstandsendringen, definer en funksjon som skal utføres. Alt dette oppnås ved å bruke følgende linjer:
vindu.AddEventListener ("Last", funksjon ()Varsel ("Det er lastet!");
);
Etter det, bare last opp HTML -nettsiden i nettleseren, og følg følgende utdata:
Brukeren blir bedt om så snart vinduet er fullastet. Legg imidlertid merke til at dette varselet vises når "vindu”Lastes. Dette betyr at brukeren kan få varselet før alle elementene er fullstendig lastes.
Metode 4: Bruke dokumentets OnreadyStateChange -attributt,
Dom har denne ene attributtet kalt “onreadystatechange”Som blir avfyrt hver gang dokumentets tilstand endres. Dette kan brukes til å utføre en funksjon, men det eneste problemet er at denne variabelen eller attributtet kan inneholde forskjellige tilstander som lasting, verserende, behandling og fullført. Dette er fordi denne attributtet er mest brukt til XML- eller HTML -forespørsler.
En sjekk må induseres for å utføre en funksjon bare når dokumentet er fullastet. Bruk følgende linjer i JavaScript -filen:
dokument.onreadyStateChange = funksjon ()hvis (dokument.ReadyState == "Komplett")
Varsel ("Yahoo!");
;
I ovennevnte kodebit har en sjekk blitt plassert for å se etter en spesifikk tilstand "komplett" bare da blir brukeren varslet. Fyr opp HTML -nettsiden og observer utdataene:
Brukeren ble varslet etter at dokumentets klare tilstand var "fullstendig".
Pakk opp
Det er ganske mange måter å utføre en JavaScript -funksjon så snart websiden har lastet helt på. For å demonstrere dette, i denne artikkelen, har du i alle metoder brukt en varsling Funksjon for å vise et varsel som viser at websiden utførte JavaScript -funksjonen etter fullstendig lasting av den websiden.