logo

JavaScript lataus

JavaScriptissä tätä tapahtumaa voidaan käyttää tietyn toiminnon käynnistämiseen, kun sivu on kokonaan näytössä. Sitä voidaan käyttää myös vierailijan selaimen tyypin ja version tarkistamiseen. Voimme tarkistaa mitä evästeitä sivu käyttää käyttämällä lastina attribuutti.

HTML:ssä onload-attribuutti käynnistyy, kun objekti on ladattu. Tämän määritteen tarkoitus on suorittaa komentosarja, kun siihen liittyvä elementti latautuu.

HTML:ssä lastina attribuuttia käytetään yleensä kanssa elementti komentosarjan suorittamiseksi, kun verkkosivun sisältö (mukaan lukien CSS-tiedostot, kuvat, skriptit jne.) on ladattu kokonaan. Sitä ei tarvitse käyttää vain tagin kanssa, koska sitä voidaan käyttää muiden HTML-elementtien kanssa.

Ero document.onload ja window.onload On: document.onload laukaisee ennen kuvien ja muun ulkoisen sisällön lataamista. Se ammutaan ennen window.onload . Samalla kun window.onload laukeaa, kun koko sivu latautuu, mukaan lukien CSS-tiedostot, komentosarjatiedostot, kuvat jne.

uusi rivi python

Syntaksi

 window.onload = fun() 

Ymmärretään tämä tapahtuma käyttämällä joitain esimerkkejä.

Esimerkki1

Tässä esimerkissä on div-elementti, jonka korkeus on 200 kuvapistettä ja leveys 200 kuvapistettä. Tässä käytämme window.onload() muuttaaksesi taustan väriä, leveyttä ja korkeutta div elementti verkkosivun lataamisen jälkeen.

Taustaväri on asetettu 'punainen' , ja leveys ja korkeus on asetettu arvoon 300 pikseliä jokainen.

 window.onload() #bg{ width: 200px; height: 200px; border: 4px solid blue; } window.onload = function(){ document.getElementById(&apos;bg&apos;).style.backgroundColor = &apos;red&apos;; document.getElementById(&apos;bg&apos;).style.width = &apos;300px&apos;; document.getElementById(&apos;bg&apos;).style.height = &apos;300px&apos;; } <h2> This is an example of window.onload() </h2> 
Testaa nyt

Lähtö

css kommentti

Koodin suorittamisen ja sivun lataamisen jälkeen tulos on -

JavaScript lataus

Esimerkki2

Tässä esimerkissä toteutamme yksinkertaisen animaation käyttämällä DOM-objektin ominaisuuksia ja toimintoja javascript . Käytämme JavaScript-toiminto getElementById() DOM-objektin hankkimiseksi ja sitten objektin määrittämiseksi globaaliksi muuttujaksi.

q1 q2 q3 q4
 var img = null; function init(){ img = document.getElementById(&apos;myimg&apos;); img.style.position = &apos;relative&apos;; img.style.left = &apos;50px&apos;; } function moveRight(){ img.style.left = parseInt( img.style.left) + 100 + &apos;px&apos;; } window.onload = init; <p>Click the below button to move the image right</p> 
Testaa nyt

Lähtö

Kun yllä oleva koodi on suoritettu onnistuneesti, tulos on -

JavaScript lataus

Nyt on esimerkki, jossa käytämme HTML-koodia lastina attribuutti ja JavaScript-funktiot.

java-lajitteluluettelo

Esimerkki3

Se on yksinkertainen esimerkki HTML:n käytöstä lastina attribuutti JavaScriptissä määritellyllä funktiolla. Tässä esimerkissä hälytys() toimintoa kutsutaan aina, kun asiakirja päivittyy.

 function fun() { alert(&apos;Hello World!!, Welcome to the javaTpoint.com&apos;); } <p> Try to refresh the document to see the effect. </p> 
Testaa nyt

Lähtö

Yllä olevan koodin suorittamisen jälkeen tulos on -

JavaScript lataus