Website-Scripting für Digital Signage

In den folgenden Beispielen sehen Sie, was Sie mit Website-Scripting tun können und wie Sie es für verschiedene Fälle einrichten.

Die Funktion window.scrollTo nimmt 3 Parameter:

1. context (null)
2. horizontale X-Koordinate (0)
3. vertikale Y-Koordinate (500)

Meist ist die Senkrechte die Achse, auf der wir scrollen wollen. Hier scrollen wir 500 Pixel senkrecht. Sie müssen mit den Zahlen ausprobieren, wie viele Pixel die richtige Stelle treffen. Der Aufruf von scrollTo steckt in einem Aufruf von setTimeout. Der verzögert den Code, damit die Seite geladen ist. Hier verzögern wir um 1000 Millisekunden. Je nachdem, wie die Website gebaut ist, ist das vielleicht nicht nötig. Setzen Sie den Wert auf 0 und prüfen Sie, ob das Scrollen trotzdem funktioniert.

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

Auf Playern auf Android-Basis zeigen manche Websites wegen responsive CSS eine mobile Version. Dieses Skript setzt den Viewport stattdessen auf eine Full-HD-Browsergröße.

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

Dieses Skript lädt die Seite alle 60 Sekunden neu. Es ruft setTimeout auf, das nur einmal läuft. Weil die Seite neu lädt und das Skript erneut ausführt, brauchen Sie setInterval nicht.

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

Mit Website-Scripting können Sie ein Video auf der Seite starten. Dieses Beispiel wartet 1 Sekunde, bis die Seite geladen ist, holt alle <video>-Tags, nimmt das erste und ruft darauf play() auf. Hat die Seite mehrere Video-Tags, startet das erste Video, das es findet.

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

Für die Anmeldung bei einer Website gibt es keine Lösung, die überall passt. Jede Website ist ein anderes System und braucht einen eigenen Weg. JavaScript-Kenntnisse helfen, das Skript lässt sich aber auch ohne technischen Hintergrund bauen. Abonnementkunden helfen wir gern bei einfachen Skripten, auf Englisch.

Das Anmeldeskript macht Folgendes:

1. Das Feld für den Benutzernamen finden und unseren Benutzernamen eintragen
2. Das Feld für das Passwort finden und das Passwort eintragen
3. Die Anmelde-Schaltfläche finden und anklicken

Zuerst muss das Skript die Elemente auf der Webseite finden. Dafür brauchen Sie die IDs der Elemente. Das geht in jedem Browser. In dieser Anleitung geht es um Chrome. Gehen Sie auf die Seite, auf der Sie die Anmeldung automatisieren möchten, und öffnen Sie die Entwicklertools. (Einstellungen -> Weitere Tools -> Entwicklertools)

Wählen Sie in den Entwicklertools den Tab Elemente, falls er nicht schon ausgewählt ist. Klicken Sie dann auf die Schaltfläche zum Auswählen eines Elements (Schritt 1), fahren Sie mit der Maus über das Feld für den Benutzernamen und klicken Sie es an (Schritt 2). Der HTML-Code des Benutzernamenfelds wird hervorgehoben. Es sollte ein <input>-Tag sein. Die meisten Website-Ersteller geben diesem Feld eine eindeutige ID, mit der wir es im Skript ansprechen. In diesem Beispiel ist es „user_login“ (Schritt 3).

Wiederholen Sie das für das Passwortfeld. In unserem Beispiel ist die ID des Passwortfelds „user_pass“. Idealerweise hat auch die Anmelde-Schaltfläche ein ID-Attribut (hier „login_btn“). Dann haben Sie alles, was das Skript braucht:

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

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

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

Manchmal hat die Anmelde-Schaltfläche keine ID, dafür stecken alle Felder in einem <form> -Element. Statt die Schaltfläche anzuklicken, können Sie submit() auf dem Formular selbst aufrufen:

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

Es kann sein, dass auch das Formular kein ID-Attribut hat. Dann können Sie alle <form> -Elemente auf der Seite suchen und das erste absenden. Das funktioniert nur, wenn auf der Seite nur ein <form> ist:

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

Wenn Sie Pech haben und keines der Elemente eine ID hat, gibt es 2 Möglichkeiten:

1. Die Entwickler der Website bitten, den Elementen der Anmeldeseite ID-Werte zu geben
2. Eine Entwicklerin oder einen Entwickler beauftragen, das Skript zu schreiben. Die Elemente lassen sich trotzdem finden, das geht aber über diesen Artikel hinaus. Eine Person, die JavaScript kann, sollte das Skript in etwa 30 Minuten bis 1 Stunde erstellen können

Ersetzen Sie nur die Variablen für Benutzername und Passwort. Dieses Anmeldeskript funktioniert für Seiten von Microsoft, Office365, Hotmail und 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);

Das Skript unten scrollt die Website mit einer vorgegebenen Geschwindigkeit von oben nach unten. Es ist komplizierter, Sie müssen aber nicht verstehen, wie es funktioniert. Kopieren Sie das Skript und passen Sie SPEED und JUMP_TO_TOP an Ihre Bedürfnisse an.

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