Sunday, February 13, 2011

JavaScript: Automatischer Seitenwechsel

Vor einiger Zeit kam mein Chef zu mir und fragte nach einem kleinen Feature in SharePoint". Er hat das schlichtweg "Bildschirmschoner" genannt. Im ersten Moment dachte ich, er macht Witze. Natürlich hab ich ihm dann mitgeteilt das er die Bildschirmschoner von Windows nutzen soll. Aber: er wollte ein kleines "Tool" das es seiner SharePoint Seite erlaubt nach einer gewissen Zeit automatisch eine neue Seite aufzurufen.

Am Ende kam ich dann mit dem Code unten an, welcher überraschender weise gut funktionierte.

Hier der Code, Erklärung gibts unten drunter.
<html>
  <head>
    <script language="javascript" type="text/javascript">
      var addresses = new Array();
      /* fill array */
      var startt = 100000;
      var activ = window.setTimeout("Show()", startt);
      var length = 4;
      function SetTimer()
      {
        try
        {
          window.clearTimeout(activ);
          activ = window.setTimeout("Show()", startt);
        }
        catch(e)
        {
          window.status = "Error: " + e.number + "; " + e.description ;
        }
      };
      function Show()
      {
        var i = Math.floor(Math.random()*length);
        document.location = addresses[i];
      };
    </script>
  
  </head>
  <body onload="SetTimer()">
  </body>
</html>

Was passiert hier eigentlich?
<body onload="SetTimer()">
Das ist noch einfach: Beim Aufruf der Seite wird die Funktion "SetTimer()" aufgerufen.
 Und hier ist die Funktion auch schon:
function SetTimer()
      {
        try
        {
          window.clearTimeout(activ);
          activ = window.setTimeout("Show()", startt);
        }
        catch(e)
        {
          window.status = "Error: " + e.number + "; " + e.description ;
        }
      };
Der letzte Abschnitt ist klar: Jede Fehlermeldung soll in der Statusleiste des Browsers angezeigt werden.
Dann mal auf zum Hauptteil..Um sicher zu gehen das meine Variable "activ" nicht schon einen Inhalt hat, lasse ich diese mit "clearTimeout" löschen.
Aber wie starte ich den Counter wieder? Hierfür nehme ich die Funktion "setTimeout", welche eine Funktion zum Aufruf und eine Zeitangabe in Millisekunden benötigt. Nach Ablauf der Zeit wird die Funktion "Show()" aufgerufen..
Und damit sind wir auch schon beim eigentlichen Problem: innerhalb "Show()" werde ich die Seiten wechseln lassen. Endlich.

Der Einfachheit halber lasse ich nur 4 Elemente in meinem Array "addresses" zu. Der erste Schritt ist nun eine Zufallszahl zu generieren. Dafür nutze ich "Math.floor(Math.random()*length). "Floor" rundet die Zahlen nur nächsten geraden  Zahl ab. "Random" bietet uns eine Zahl zwischen 0 und 1 an. Um eine Nummer zwischen 1 und 4 zu erhalten muss ich das Ergebnis von Random mit der Länge meines Arrays multiplizieren, in dem Fall 4.

Nun haben wir die Zufallszahl "i". Aber was machen wir damit?
Einfach: Wir ändern die Adresse in der Adressleiste mit "document.location = addresses[i];". Der 2. Teil wählt das Element aus dem Array aus, das an der Stelle "i" steht. Der erste Teil schreibt die Adresse dann in die Adressleiste.

Und schon sind wir fertig. Die Seite wird nun alle paar Minuten die Seite wecheln.

No comments:

Post a Comment