decocode decocode deco    

Kleine JavaScript-Helfer #

Übersicht
Elemente verbergen/anzeigen
Dropdown-Liste als Navigationsmenü
Popup-Fenster
Elternfenster über Popup manipulieren

Ich bin zwar kein großer Freund von JavaScript, aber ich muss zugeben, dass die eine oder andere Funktion durchaus nützlich sein kann. Die von mir häufig verwendeten Funktionen werden auf dieser Seite kurz beschrieben.

Elemente verbergen/anzeigen #

Mitunter möchte man bestimmte Teile einer Seite nur bei Bedarf anzeigen lassen. Da es möglich ist, mit JavaScript auch die CSS-Eigenschaften eines Elements zu manipulieren, kann man so auch die Sichtbarkeit von definierten Bereichen beeinflussen.

Dazu werden in diesem Beispiel zunächst zwei Absätze mit den IDs p1 und p2 definiert (Zeilen 14 und 15), wobei p2 der Absatz ist, der erst bei Bedarf angezeigt werden soll, daher wird er zunächst ausgeblendet, indem ihm der CSS-Stil display:none; zugewiesen wird. p1 ist der Absatz, über den p2 erreicht werden kann.

Jeder Absatz enthält nun einen Link, über den die Sichtbarkeit der Absätze beeinflusst wird. Als Wert der Eigenschaft href im <a>-Tag wird allerdings javascript:void(0); angegeben, da es sich ja nicht um einen klassischen Hyperlink handelt, sondern um einen JavaScript-Funktionsaufruf.

Die Funktionen werden nun über den Eventhandler onclick aufgerufen. Im Fall des Absatzes p1 wird dieser ausgeblendet und p2 eingeblendet:

document.getElementById("p1").style.display="none"; und
document.getElementById("p2").style.display="block";

Im Fall von p2 ist es dann genau umgekehrt. Die Funktion bewirkt dass die CSS-Eigenschaft (style) display des HTML-Elements mit der angegebenen ID entweder nach none (nicht sichtbar) bzw. nach block (als Block-Element anzeigen) geändert wird. Absätze sind HTML-Block-Elemente, daher wird hier der Wert block verwendet. Soll die Anzeige von Inline-Elementen (wie z. B. <span> oder <img>) gesteuert werden, so wird der Wert inline verwendet.

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>JavaScript</title>
    <meta charset='UTF-8'>
    <style type='text/css'>
      body { background-color:#abc; }
      p { padding:10px 20px; }
      .box { border:1px solid #000; }
    </style>
  </head>
  <body>
    <p class='box'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p id='p1'><a href='javascript:void(0);' onclick='document.getElementById("p1").style.display="none";document.getElementById("p2").style.display="block";'>Weitere Informationen <b>anzeigen</b></a></p>
    <p id='p2' style='display:none;'><a href='javascript:void(0);' onclick='document.getElementById("p2").style.display="none";document.getElementById("p1").style.display="block";'>Weitere Informationen <b>verbergen</b></a><br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p class='box'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </body>
</html>

Dropdown-Liste als Navigationsmenü #

Möchte man statt vieler Links, die unter Umständen das Layout einer Seite überfordern, die Navigation einer Seite in eine kleine Dropdown-Liste verlagern, so geht das mit der Funktion window.location.href, die über den Eventhandler onchange innerhalb des <select>-Tags aufgerufen wird, sobald vom Benutzer ein neues Element in der Liste gewählt wird.

Der Eigenschaft window.location.href wird dann der Wert
document.forms.navi.links.options[n].value zugewiesen, wobei
n = document.forms.navi.links.options.selectedIndex ist.

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>JavaScript</title>
    <meta charset='UTF-8'>
    <style type='text/css'>
      body { background-color:#abc; }
    </style>
  </head>
  <body>
    <form id='navi' action='./test.htm' method='post'>
      <select name='links' onchange='window.location.href=document.forms.navi.links.options[document.forms.navi.links.options.selectedIndex].value;'>
        <option value=''>Wohin soll es gehen?</option>
        <option value='./test.htm'>Anfang</option>
        <option value='./test.htm?content=1'>Seite 1</option>
        <option value='./test.htm?content=2'>Seite 2</option>
        <option value='./test.htm?content=3'>Seite 3</option>
        <option value='https://de.wikipedia.org/'>Wikipedia</option>
      </select>
    </form>
  </body>
</html>

So richtig elegant ist diese Lösung aber erst dann, wenn man auch eine JavaScript-freie Alternative anbietet, denn wenn beim Besucher JavaScript deaktiviert ist, funktioniert die ganze Navigation nicht mehr, und das ist wohl ein gravierender Mangel. Man kann in diesem Fall den Wert des Menüs über einen ›Go!‹-Button an ein Skript schicken, das aus diesem Wert dann beispielsweise per PHP eine Weiterleitung herstellt:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
  if ($_POST['links']) {
    header("Location: ".$_POST['links']);
    exit;
  }
?>
<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>JavaScript</title>
    <meta charset='UTF-8'>
    <style type='text/css'>
      body { background-color:#abc; }
    </style>
  </head>
  <body>
    <form id='navi' action='./test.php' method='post'>
      <select name='links' onchange='window.location.href=document.forms.navi.links.options[document.forms.navi.links.options.selectedIndex].value;'>
        <option value=''>Wohin soll es gehen?</option>
        <option value='./test.php'>Anfang</option>
        <option value='./test.php?content=1'>Seite 1</option>
        <option value='./test.php?content=2'>Seite 2</option>
        <option value='./test.php?content=3'>Seite 3</option>
        <option value='https://de.wikipedia.org/'>Wikipedia</option>
      </select>
      <input type='submit' value='Go!'>
    </form>
  </body>
</html>

Popup-Fenster #

Sicherlich oft eine beliebte Möglichkeit, kurze Informationen zusätzlich zu einer Seite anzubieten, sind die berüchtigten Popup-Fenster, die einen oft genug mit Werbung belästigen. Daher verfügen die meisten Browser mittlerweile über Popup-Blocker, durch deren Hilfe diese Fensterchen gar nicht erst geladen werden. In der Regel bezieht sich diese Funktion aber auf automatische Popups und nicht auf solche, die der Benutzer absichtlich aufruft. Daher wird hier trotz allem erläutert, wie man solche Fenster zaubert und was es dabei zu beachten gibt.

Das folgende Skript veranschaulicht die Funktion:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>JavaScript</title>
    <meta charset='UTF-8'>
    <style type='text/css'>
      body { background-color:#abc; }
    </style>
    <script type='text/javascript'>
      /* <![CDATA[ */
      function openWindow(url, name, widgets) {
        PopUp = window.open(url, name, widgets);
        PopUp.focus();
      }
      /* ]]> */
    </script>
  </head>
  <body id='top'>
    <p><a href='javascript:void(0);' onclick='openWindow("popup.htm","popup","height=250, width=600, left=100, top=250, scrollbars=yes, menubar=no, toolbar=no");'>Popup-Fenster öffnen</a></p>
    <form id='formular1' action='test.htm' method='post'>
      <input type='text' name='eingabe' value=''>
    </form>
  </body>
</html>

In den Zeilen 11 bis 14 wird die Funktion openWindow() definiert, die einerseits über die Funktion window.open() das Fenster mit einer Reihe bestimmter Parameter erzeugt und andererseits mit der Funktion PopUp.focus() dieses Fenster in den Vordergrund holt.

Die Funktion openWindow() wird dann über den Link in Zeile 19 aufgerufen. Es müssen drei Werte an die Funktion übergeben werden: die zu öffnende Datei (hier: popup.htm), der Name des Fensters und die Parameter für die Darstellung des Fensters. Hierbei muss man allerdings feststellen, dass die Unterstützung dieser Parameter in den verschiedenen Browsern sehr unterschiedlich ausfällt, so dass man in der Regel darauf verzichten muss, dass die Popups überall gleich angezeigt werden, es sei denn man beschränkt sich auf den kleinsten gemeinsamen Nenner der unterstützten Merkmale.

In den folgenden Tabellen werden die Browser nach den von ihnen unterstützten Merkmalen verglichen. Ein Haken oder ein Kreuz bedeutet, dass das Attribut unterstützt bzw. nicht unterstützt wird. Die Worte ›yes‹ bzw. ›no‹ zeigen an, dass das Attribut zwar unterstützt wird, aber auf den angegebenen Wert festgelegt ist. Indizes verweisen auf die Erläuterungen unterhalb der Tabelle.

heightwidthscreenXscreenYlefttopresizablescrollbars
Firefox 3.5Symbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztyesSymbol: Merkmal wird unterstützt
Opera 10Symbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird nicht unterstütztSymbol: Merkmal wird nicht unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstützt2yesSymbol: Merkmal wird unterstützt10
MSIE 8Symbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird nicht unterstütztSymbol: Merkmal wird nicht unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstützt
Safari 4Symbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztyesyes
Chrome 3Symbol: Merkmal wird unterstützt5Symbol: Merkmal wird unterstützt5Symbol: Merkmal wird unterstützt5Symbol: Merkmal wird unterstützt5Symbol: Merkmal wird unterstützt5Symbol: Merkmal wird unterstützt5yesyes
Konqueror 4.2Symbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztyesyes
Epiphany 2.26Symbol: Merkmal wird unterstützt5Symbol: Merkmal wird unterstützt5Symbol: Merkmal wird nicht unterstütztSymbol: Merkmal wird nicht unterstütztSymbol: Merkmal wird nicht unterstütztSymbol: Merkmal wird nicht unterstütztyesyes
menubartoolbarlocationbarpersonalbarstatusbar
Firefox 3.5Symbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird nicht unterstützt1Symbol: Merkmal wird unterstütztyes
Opera 10nono3no3nono4
MSIE 8Symbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztnoSymbol: Merkmal wird nicht unterstützt11Symbol: Merkmal wird unterstützt7
Safari 4Symbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird nicht unterstützt1yesSymbol: Merkmal wird unterstützt7
Chrome 3Symbol: Merkmal wird unterstützt8nononoyes9
Konqueror 4.2Symbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird nicht unterstützt1Symbol: Merkmal wird nicht unterstützt11Symbol: Merkmal wird unterstützt7
Epiphany 2.26Symbol: Merkmal wird unterstütztSymbol: Merkmal wird unterstütztSymbol: Merkmal wird nicht unterstützt1Symbol: Merkmal wird nicht unterstützt6yes

  1 Locationbar ist Teil der Toolbar.
  2 y-Position wird ab Oberkante der Dokumentfläche gemessen.
  3 Toolbar und Locationbar können direkt im Popup-Fenster aktiviert werden.
  4 Statusbar des Elternfensters wird für das Popup verwendet.
  5 Nur wenn menubar=no.
  6 Hat keine Personalbar.
  7 Versteht nur status, aber nicht statusbar.
  8 menubar=yes erzeugt Tab statt Popup.
  9 Zeigt Verweisziel statt Status.
10 In der Linux-Version immer yes.
11 Personalbar ist Teil der Toolbar.

Die Attribute height und width geben die Höhe und die Breite des Popup-Fensters an. screenX und screenY bzw. left und top geben den Abstand der oberen linken Ecke des Popup-Fensters zum Elternfenster an. resizable=no soll verhindern, dass man die Größe des Fensters manipulieren kann, und scrollbars=no soll Scrollbalken unterdrücken, auch wenn der Fensterinhalt mehr Platz benötigt als vorhanden. Alle anderen Attribute beziehen sich auf die Leisten, die auch in einem normalen Browserfenster vorhanden sein können: Menüleiste, Symbolleiste, Adressleiste, Lesezeichenleiste und Statusleiste. Entsprechend der Tabelle werden diese Komponenten von den Browsern aber unterschiedlich behandelt.

Fazit: Die Angaben zur Dimensionierung sollte man in left und top angeben, da screenX und screenY nicht von allen Browsern verstanden wird. Auf die Attribute resizable=no und scrollbars=no sollte man verzichten, da sie unterschiedlich unterstützt werden und ohnehin die Freiheit des Benutzers einschränken. Allerdings muss man bei Bedarf mindestens für Firefox scrollbars=yes explizit angeben, da die Voreinstellung hier no ist. menubar und toolbar können verwendet werden, da sie auch ganz sinnvoll sein können und gut unterstützt werden, wogegen man auf locationbar, personalbar sowie statusbar verzichten muss. Die Statusleiste zu verbergen ist ohnehin nicht besonders elegant, da der Benutzer gerade hier sehen kann, wohin Links führen.

Elternfenster über Popup manipulieren #

Jetzt braucht man natürlich noch eine Datei, die in dem Popup angezeigt werden soll. Entsprechend der Referenz in der Elterndatei (Zeile 19) heißt diese popup.htm und befindet sich im gleichen Verzeichnis wie die Elterndatei. In dem Popup sind noch ein paar weitere JavaScript-Funktionen enthalten, die verdeutlichen sollen, wie man aus diesem Popup heraus den Inhalt des Elternfensters verändern kann:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>JavaScript</title>
    <meta charset='UTF-8'>
    <style type='text/css'>
      body { background-color:#abc; }
    </style>
  </head>
  <body>
    <p>Hintergrundfarbe:
      <a href='javascript:void(0);' onclick='parent.opener.document.getElementById("top").style.backgroundColor="#fff";'>weiß</a>
      <a href='javascript:void(0);' onclick='parent.opener.document.getElementById("top").style.backgroundColor="#09b";'>blau</a>
      <a href='javascript:void(0);' onclick='parent.opener.document.getElementById("top").style.backgroundColor="#6c0";'>grün</a>
      <a href='javascript:void(0);' onclick='parent.opener.document.getElementById("top").style.backgroundColor="#fd0";'>gelb</a>
    </p>
    <p>Lieblingsstadt:
      <a href='javascript:void(0);' onclick='parent.opener.document.forms.formular1.eingabe.value="Berlin";'>Berlin</a>
      <a href='javascript:void(0);' onclick='parent.opener.document.forms.formular1.eingabe.value="Hamburg";'>Hamburg</a>
      <a href='javascript:void(0);' onclick='parent.opener.document.forms.formular1.eingabe.value="Köln";'>Köln</a>
      <a href='javascript:void(0);' onclick='parent.opener.document.forms.formular1.eingabe.value="Timbuktu";'>Timbuktu</a>
    </p>
    <p>Neue Seite:
      <a href='javascript:void(0);' onclick='parent.opener.document.location.href="http://www.decocode.de/";window.close();'>decocode</a>
    </p>
  </body>
</html>