Das Dreamweaver Manual - JavaScript-Special

Haben Sie sich auch schon mal gefragt, warum Sie, um Ihre Lieblingsseiten zu besuchen, immer -zig Klicks auf irgendwelche Bookmarks oder Favoriten machen müssen? Dann habe ich hier was Feines für Sie: Mit JavaScript kann man sich schnell und einfach ein Formular bauen, das einem diese lästige Arbeit abnimmt. Das Ganze sollte eigentlich mit jedem JavaScript-fähigen Browser funktionieren, allerdings zeigte sich, dass Opera selbst in der aktuellen Version 5.02 noch nicht dazu fähig ist. Erfolgreich getestet wurden dagegen der MS Internet Explorer 5.5, Netscape Communicator 4.76, Mozilla 0.7 und aktuelle Mozilla Nightly Builds. Berichte über weitere funktionierende Konstellationen, aber auch Bugreports und ähnliches sind immer willkommen - testen Sie einfach das unten stehende Formular und

schreiben Sie mir über Ihre Erfahrungen!

Kommen wir zum Code. Der Vorteil der verwendeten Methode ist, dass sich das Formular leicht erweitern lässt, ohne dass man viel ändern müsste - einfach eine Checkbox für jede in einem neuen Fenster zu öffnende Site. Neben dem obligatorischen "Öffnen"-Button (submit) und dem "Default"-Button (reset) zum Zurücksetzen des Formulars auf Standardeinstellung habe ich noch einen "Clear"-Button (button) hinzugefügt, der alle Checkboxen auf einen Schlag deselektiert.

Beispiel-Formular:

Das eigentliche Script im HTML-Header (HEAD)

Das eigentliche Script besteht aus zwei Funktionen: Die erste dient dem Öffnen der Fenster und die zweite dem Deselektieren aller Checkboxen. Das Script ist unabhängig von der Anzahl der Checkboxen im Formular.

Zum verwendeten JavaScript-Befehl open() ist noch zu sagen, dass dessen zweiter Parameter den Namen des Fensters spezifiziert, d.h. über diese Namen, der sich aus "win" und der internen Nummer der jeweiligen Formular-Checkbox zusammensetzt (also z.B. "win1" für die sechte Checkbox), kann auf dieses Fenster zugegriffen werden; hierzu muss der Fenstername als Wert für target z.B. in Links der Form

<a href="seite.html"
  target="fenstername">

angegeben werden.

<script language="JavaScript" type="text/javascript">
<!--
  function formeval() {
  var max = document.openlist.length;
  for (var i=0;i<max;i++) {
    if (document.openlist.elements[i].type == "checkbox" &&
        document.openlist.elements[i].checked)
      open(document.openlist.elements[i].value,"win"+i); // Target ist z.B. "win1"
  }
}

function clearform() {
  var max = document.openlist.length;
  for (var i=0;i<max;i++) {
    document.openlist.elements[i].checked=0;
  }
}
//-->
</script>

Das Formular im HTML-Körper (BODY)

Die einzelnen Formularelemente können z.B. in einer Tabelle platziert werden. (CSS-) Layer dagegen scheinen dem Netscape Communicator erhebliche Probleme zu bereiten, daher sollte ggf. darauf verzichtet werden, sie zum Positionieren des Formulars einzusetzen (andere Elemente der Seite sind davon nicht betroffen).

Anstelle der Checkboxen im folgenden Code können nun beliebig viele eigene Checkboxen eingebunden werden. Was zählt ist lediglich der Wert (value), der die URL angibt (damit beliebige Adressen möglich sind, wird nicht "http://" ergänzt!); sinnvollerweise sollte natürlich noch vor oder hinter jeder Checkbox eine Beschreibung mit Wiedererkennungswert stehen. Soll die jeweilige Checkbox standardmäßig selektiert sein, ist das jeweilige Checkbox-Tag um das Attribut "checked" zu ergänzen (wie im ersten Fall des Beispiels).

Eine Bemerkung noch zum Schluss: Die Verbidung zwischen Formular und Script wird über den Formularnamen hergestellt. Es wäre auch möglich, ohne diesen Namen zu arbeiten, in dem man das Formular im Script über seine interne Nummer referenziert (ist es das einige auf der Seite, gilt also: openlist=forms[0]).

Im <BODY>-Bereich kann nun an fast beliebiger Stelle folgender Code eingebettet werden:

<form name="openlist" target="_self">
  <input type="checkbox" value="http://www.golem.de/" checked> Golem
  <input type="checkbox" value="http://www.heise.de/"> Heise
  <input type="submit" value="&Ouml;ffnen!" onClick="formeval()">
  <input type="reset" value="Default">
  <input type="button" value="Clear" onClick="clearform()">
</form>

Sollten noch Fragen oder Unklarheiten bestehen, versuche ich gerne, eine Lösung zu finden. Schreiben Sie mir!

jens.hatlak.de
Atari
Dreamweaver Manual		Start
Akronyme		Einführung
		Tipps
This page in English		Fenster
This page in English		Halbstatische Tabellen
		JavaScript-Special

JavaScript-Special

Eine Liste von Sites in je einem neuen Fenstern öffnen

Beispiel-Formular:

Das eigentliche Script im HTML-Header (HEAD)

Das Formular im HTML-Körper (BODY)