Scripts de sites web

Dans les exemples qui suivent, nous passons en revue ce que vous pouvez faire avec les scripts de sites web et comment les régler selon les situations.

La fonction window.scrollTo prend 3 paramètres :

1. contexte (null)
2. coordonnée horizontale X (0)
3. coordonnée verticale Y (500)

En général, c’est l’axe vertical que l’on veut faire défiler. Ici, on défile de 500 pixels verticalement, mais vous devez essayer les nombres pour trouver la bonne quantité de pixels. L’appel à scrollTo est enveloppé dans un appel à setTimeout, qui retarde l’exécution pour que la page soit chargée. Ici, on retarde de 1 000 millisecondes. Selon la façon dont le site est construit, ce n’est pas toujours nécessaire. Vous pouvez essayer la valeur 0 et voir si le défilement fonctionne encore.

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

Sur les lecteurs Android, certains sites affichent une version mobile à cause du CSS adaptatif. Ce script force la zone d’affichage à la taille d’un navigateur 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);

Ce script force la page à s’actualiser toutes les 60 secondes. Il appelle setTimeout, qui ne s’exécute qu’une fois. Comme la page se recharge et relance le script, il n’est pas nécessaire d’utiliser setInterval.

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

Les scripts de sites web peuvent lancer une vidéo sur la page. Cet exemple attend 1 seconde que la page se charge, récupère toutes les balises <video>, prend la première et appelle play() dessus. Si la page a plusieurs balises video, cela lance la première vidéo trouvée.

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

Pour se connecter à un site, il n’existe pas de solution unique. Chaque site est un système différent et demande une approche adaptée. Des bases de JavaScript aident, mais il est tout à fait possible de créer le script sans formation technique. Nous aidons volontiers nos clients abonnés pour des scripts simples (assistance en anglais).

Le script de connexion fait ceci :

1. Trouver le champ du nom d’utilisateur et le remplir
2. Trouver le champ du mot de passe et le remplir
3. Trouver le bouton de connexion et cliquer dessus

D’abord, il faut apprendre au script à trouver les éléments de la page. Pour cela, il faut connaître les identifiants de ces éléments. C’est possible dans tous les navigateurs. Ce guide se concentre sur Chrome. Allez sur la page où vous voulez automatiser la connexion et ouvrez les outils de développement. (Paramètres → Plus d’outils → Outils de développement)

Dans les outils de développement, choisissez l’onglet Éléments s’il n’est pas déjà sélectionné. Cliquez ensuite sur le bouton de sélection d’élément (étape 1), survolez le champ du nom d’utilisateur et cliquez dessus (étape 2). Le code HTML du champ est mis en évidence. Ce doit être une balise <input>. La plupart des créateurs de sites donnent à ce champ un identifiant unique que l’on peut utiliser dans le script. Dans cet exemple, c’est « user_login » (étape 3).

Répétez pour le champ du mot de passe. Dans notre exemple, l’identifiant du champ mot de passe est « user_pass ». Idéalement, le bouton de connexion a aussi un attribut ID (ici « login_btn »). Vous avez alors tout ce qu’il faut pour créer le script :

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

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

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

Parfois, le bouton de connexion n’a pas d’identifiant, mais tous les champs sont dans un élément <form>. Au lieu de cliquer sur le bouton, on peut appeler submit() sur le formulaire lui-même :

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

Il est aussi possible que le formulaire n’ait pas d’attribut ID. On peut alors chercher tous les éléments <form> de la page et envoyer le premier trouvé. Attention : cela ne fonctionne que s’il n’y a qu’un seul <form> sur la page :

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

Si vraiment aucun élément n’a d’attribut ID, il reste 2 options :

1. Contacter les développeurs du site et leur demander d’attribuer des identifiants aux éléments de la page de connexion
2. Faire écrire le script par un développeur. On peut encore trouver les éléments, mais cela dépasse le cadre de cet article. Un développeur JavaScript qualifié devrait pouvoir écrire le script en 30 minutes à 1 heure

Remplacez seulement les variables de nom d’utilisateur et de mot de passe. Ce script de connexion fonctionne pour les sites Microsoft, Office365, Hotmail et PowerBI.

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

Le script ci-dessous fait défiler le site de haut en bas à une vitesse donnée. Il est plus compliqué, mais vous n’avez pas besoin de comprendre comment il fonctionne. Copiez-le et ajustez SPEED et JUMP_TO_TOP selon vos besoins.

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