Script per siti web

Negli esempi qui sotto vediamo cosa puoi fare con Script per siti web e come configurarlo in situazioni diverse.

La funzione window.scrollTo prende 3 parametri:

1. contesto (null)
2. coordinata orizzontale X (0)
3. coordinata verticale Y (500)

Di solito l’asse che vogliamo scorrere è quello verticale. In questo caso scorriamo di 500 pixel in verticale, ma devi provare i numeri per trovare quanti pixel servono. La chiamata a scrollTo è dentro una chiamata a setTimeout, che ritarda l’esecuzione per essere sicuri che la pagina sia caricata. Qui ritardiamo di 1000 millisecondi. A seconda di come è costruito il sito, potrebbe non servire. Puoi provare a mettere 0 e vedere se lo scorrimento funziona ancora.

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

Sui player basati su Android, alcuni siti possono mostrare una versione mobile per il CSS responsive. Questo script forza il viewport alla misura di un browser Full HD.

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);

Questo script forza il ricaricamento della pagina ogni 60 secondi. Chiama setTimeout, che parte una volta sola. Dato che la pagina si ricarica ed esegue di nuovo lo script, non serve setInterval.

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

Script per siti web può avviare un video sulla pagina. Questo esempio aspetta 1 secondo che la pagina si carichi, prende tutti i tag <video>, prende il primo e chiama la funzione play(). Se la pagina ha più tag video, parte il primo che trova.

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

Per l’accesso a un sito non esiste una soluzione unica. Ogni sito è un sistema diverso e ha bisogno di un approccio su misura. Saper programmare in JavaScript aiuta, ma puoi creare lo script anche senza un background tecnico. Aiutiamo volentieri i clienti in abbonamento con script semplici (l’assistenza è in inglese).

Lo script di accesso fa queste azioni:

1. Trova il campo del nome utente e lo compila con il nostro nome utente
2. Trova il campo della password e lo compila con la password
3. Trova il pulsante di accesso e ci fa clic

Prima dobbiamo insegnare allo script a trovare gli elementi nella pagina. Per farlo dobbiamo scoprire gli ID degli elementi. Si può fare in ogni browser, ma in questa guida usiamo Chrome. Vai alla pagina in cui vuoi automatizzare l’accesso e apri gli strumenti per sviluppatori. (Impostazioni → Altri strumenti → Strumenti per sviluppatori)

Negli strumenti per sviluppatori, scegli la scheda Elements se non è già selezionata (in italiano spesso Elementi). Poi fai clic sul pulsante Select Element (passaggio 1), passa il mouse sul campo del nome utente e fai clic (passaggio 2). Il codice HTML del campo nome utente viene evidenziato: dovrebbe essere un tag <input>. La maggior parte di chi crea siti assegna a quel campo un ID univoco che possiamo usare nello script. In questo esempio è «user_login» (passaggio 3).

Ripeti lo stesso procedimento per il campo password. Nel nostro esempio l’id del campo password è «user_pass». Idealmente anche il pulsante di accesso ha un attributo ID (qui «login_btn»). A quel punto abbiamo tutto per creare lo script:

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

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

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

A volte però il pulsante di accesso non ha un ID e tutti i campi sono dentro un elemento <form>. Invece di fare clic sul pulsante, possiamo chiamare la funzione submit() sul form:

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

È possibile che nemmeno il form abbia un attributo ID. Allora possiamo cercare tutti gli elementi <form> sulla pagina e inviare il primo che troviamo, ma funziona solo se sulla pagina c’è un solo <form>:

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

Se sei molto sfortunato e nessun elemento ha un ID, ci sono 2 opzioni:

1. Contatta gli sviluppatori del sito e chiedi di assegnare valori ID agli elementi della pagina di accesso
2. Ingaggia uno sviluppatore per scrivere lo script: si possono ancora trovare gli elementi, ma va oltre questa pagina. Uno sviluppatore JavaScript qualificato dovrebbe riuscire a scrivere lo script in circa 30 minuti o 1 ora

Sostituisci solo le variabili di nome utente e password. Questo script di accesso funziona per i siti Microsoft, Office365, Hotmail e Power BI.

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);

Lo script qui sotto fa scorrere il sito dall’alto verso il basso a una velocità data. È più complicato, ma non devi capire come funziona. Puoi copiarlo e regolare SPEED e JUMP_TO_TOP secondo le tue esigenze.

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);