Veebilehe skriptid

Järgmistes näidetes vaatame, mida veebilehe skriptidega teha saab ja kuidas neid eri olukordades üles seada.

Funktsioon window.scrollTo võtab 3 parameetrit:

1. kontekst (null)
2. rõhtne X-koordinaat (0)
3. püstine Y-koordinaat (500)

Tavaliselt tahame kerida püstteljel. Siin kerime 500 pikslit püstsuunas, aga õige piksliarvu leidmiseks tuleb arvudega katsetada. Kutse scrollTo on mähitud funktsiooni setTimeout sisse, mis viivitab koodi käivitust, et leht jõuaks laadida. Siin on viivitus 1000 millisekundit. Olenevalt sellest, kuidas veebileht on ehitatud, ei pruugi viivitust vaja minna. Proovi seada väärtuseks 0 ja vaata, kas leht ikka kerib.

setTimeout(window.scrollTo.bind(null, 0, 500), 1000);

Androidi-pleieritel võib mõni veebileht näidata mobiilivaadet, sest saidil on kohanduv CSS. See skript sunnib vaateala Full HD brauseri suuruseks.

const viewportWidth = 1920;
const viewportHeight = 1080;
const devicePixelRatio = 2;

// Set the viewport meta tag to control the layout on mobile devices
const viewportMetaTag = document.querySelector('meta[name=viewport]');
if (viewportMetaTag) {
viewportMetaTag.content = `width=${viewportWidth}, height=${viewportHeight}, initial-scale=${1 / devicePixelRatio}, maximum-scale=${1 / devicePixelRatio}, user-scalable=0`;
}

// Set the window size to match the viewport
window.resizeTo(viewportWidth, viewportHeight);

// Trigger a resize event to ensure proper rendering
const resizeEvent = new Event('resize');
window.dispatchEvent(resizeEvent);

See skript sunnib lehte värskendama iga 60 sekundi tagant. Pane tähele, et see kutsub setTimeout, mis jookseb ainult ühe korra. Kuna leht laeb uuesti ja käivitab skripti otsast, pole setInterval vaja.

setTimeout(function(){
  window.location.reload(true);
}, 60000);

Veebilehe skriptidega saab lehel video käivitada. See näide ootab 1 sekundi, kuni leht laeb, võtab kõik <video> sildid, valib esimese ja kutsub sellel funktsiooni play(). Kui lehel on mitu video-silti, käivitub esimene video, mille skript leiab.

setTimeout(function(){document.getElementsByTagName('video')[0].play()}, 1000);

Veebilehele sisselogimisel pole üht lahendust, mis kõigile sobiks. Iga veebileht on erinev süsteem ja vajab oma lähenemist. JavaScripti oskus tuleb kasuks, aga skripti saab teha ka ilma tehnilise taustata. Aitame tellimusega kliente lihtsate skriptidega hea meelega, inglise keeles.

Sisselogimisskript teeb järgmist:

1. Leiab kasutajanime välja ja täidab selle kasutajanimega
2. Leiab paroolivälja ja täidab selle parooliga
3. Leiab sisselogimisnupu ja klõpsab seda

Esmalt tuleb skriptile õpetada, kuidas veebilehe elemendid üles leida. Selleks on vaja teada elementide ID-sid. See on võimalik igas brauseris, aga selles juhendis vaatame Chrome’i. Mine lehele, kus tahad sisselogimist automatiseerida, ja ava arendajatööriistad. (Settings -> More Tools -> Developer Tools)

Arendajatööriistades vali vahekaart Elements, kui see pole juba valitud. Seejärel klõpsa nuppu Select Element (samm 1), vii hiir kasutajanime väljale ja klõpsa seda (samm 2). Esile tõuseb kasutajanime välja HTML-kood. See peaks olema silt <input>. Enamik veebilehtede tegijaid annab sellele väljale unikaalse ID, millele skriptis viidata. Selles näites on see „user_login“ (samm 3).

Korda sama parooliväljaga. Meie näites on paroolivälja ID „user_pass“. Ideaalis on ka sisselogimisnupul ID-atribuut (siin „login_btn“). Siis on skripti loomiseks kogu info olemas:

document.getElementById('user_login').value = "YOUR_USERNAME_HERE";

document.getElementById('user_pass').value = "YOUR_PASSWORD_HERE";

document.getElementById('login_btn').click();

Mõnikord pole sisselogimisnupule ID-d antud, vaid kõik väljad on mähitud elemendi <form> sisse. Nupu klõpsamise asemel saab kutsuda vormil endal funktsiooni submit():

document.getElementById('loginform').submit();

Võimalik on ka see, et vormil endal pole ID-atribuuti. Siis saab otsida lehelt kõik <form> elemendid ja saata ära esimese, mille leiame. See töötab ainult siis, kui lehel on üksainus <form>:

document.getElementsByTagName('form')[0].submit();

Kui ühelgi elemendil pole ID-atribuuti, on 2 võimalust:

1. Võta ühendust veebilehe arendajatega ja palu neil sisselogimislehe elementidele ID-d anda
2. Palka arendaja skripti kirjutama – elemente on ikkagi võimalik üles leida, aga see jääb sellest artiklist välja. Vilunud JavaScripti arendaja peaks skripti valmis saama umbes 30 minuti kuni 1 tunniga

Asenda ainult kasutajanime ja parooli muutujad. See sisselogimisskript töötab Microsofti, Office365, Hotmaili ja PowerBI saitidel.

var user = "YOUR_USERNAME_HERE";
var pass = "YOUR_PASSWORD";
function setValue(id, value){
  document.getElementById(id).value = value;
  document.getElementById(id).dispatchEvent(new Event("change"));
}
function clickButton(id){
  document.getElementById(id).click();
}
setTimeout(setValue.bind(null, 'i0116', user), 1000);
setTimeout(clickButton.bind(null, 'idSIButton9'), 1100);
setTimeout(setValue.bind(null, 'i0118', pass), 1800);
setTimeout(clickButton.bind(null, 'idSIButton9'), 2000);

Allolev skript kerib veebilehe antud kiirusega ülevalt alla. Skript on keerulisem, aga sa ei pea aru saama, kuidas see töötab. Kopeeri skript ja kohanda SPEED ning JUMP_TO_TOP oma vajaduse järgi.

var SPEED = 20; //change the speed for faster/slower scrolling. Value between 1 and 1000
var JUMP_TO_TOP = true; //Scrolls back to top when scrolling reaches bottom. either true or false

var fps = 100;
var speedFactor = 0.001;
var minDelta = 0.5;
var autoScrollSpeed = 10;
var autoScrollTimer, restartTimer;
var isScrolling = false;
var prevPos = 0, currentPos = 0;
var currentTime, prevTime, timeDiff;

window.addEventListener("wheel", handleManualScroll);
window.addEventListener("touchmove", handleManualScroll);

function handleManualScroll(){
  currentPos = window.scrollY;
  clearInterval(autoScrollTimer);
  if (restartTimer){
    clearTimeout(restartTimer);
  }
  restartTimer = setTimeout(function(){
    prevTime = null;
    setAutoScroll();
  }, 50);
}

window.addEventListener("scroll", function (e) {
  currentPos = window.scrollY;
  if((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight){
    //scrolling reached bottom.
    if(JUMP_TO_TOP){
      window.scrollTo(0, 0)
      currentPos = 0;
    }
    else{
      clearInterval(autoScrollTimer);
    }
  }
});

function setAutoScroll(newValue){
  if(newValue){
    autoScrollSpeed = speedFactor * newValue;
  }
  if(autoScrollTimer){
    clearInterval(autoScrollTimer);
  }
  autoScrollTimer = setInterval(function(){
    currentTime = Date.now();
    if(prevTime){
      if(!isScrolling){
        timeDiff = currentTime - prevTime;
        currentPos += autoScrollSpeed * timeDiff;
        if(Math.abs(currentPos - prevPos) >= minDelta){
          isScrolling = true;
          window.scrollTo(0, currentPos);
          isScrolling = false;
          prevPos = currentPos;
          prevTime = currentTime;
        }
      }
    }
    else {
      prevTime = currentTime;
    }
  }, 1000 / fps);
}

setAutoScroll(SPEED);