brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

JS: Browserfenster ohne alles

von Eric Horn und Thomas Salvador.

Wie öffnet man ein neues Browserfenster öffnen könne, welches keinerlei Leisten hat. Das ist nun wirklich ein gefährliches Spielzeug, nichts destoweniger ist es nützlich zu wissen, wie es geht. Sie finden hier einige Varianten und einige Kommentaren, die Sie doch bitte auch lesen möchten und das Ganze dann im Sinne Ihrer Besucher einsetzen.

Variante 1

von Eric Horn.

Das Problem ist mit einem einfachen Javascript im <head> zu lösen:

<script>
function popopen(openadresse){
  vista=window.open(openadresse,"vista","toolbar=no,directories=no,
  status=no,menubar=no,scrollbars=no, resizable=no,copyhistory=no,
  width=680,height=380");
  vista=window.open(openadresse,"vista","toolbar=no,directories=no,
  status=no,menubar=no,scrollbars=no, resizable=no,copyhistory=no,
  width=680,height=380"); }
</script>

Die verschiedenen Optionen (toolbar etc.) sprechen wohl fuer sich. Im Quelltext kann man das Ganze dann mittels der Befehlsfolge

<script>
   popopen('anzeige.html');
</script>

aufrufen. Eine andere Möglichkeit besteht in einem Hyperlink, wo man dann anstatt beispielsweise 'anzeige.html', einfach den Befehl

<a href="javascript:popopen('anzeige.html');">test</a>

schreibt. Fenster öffnen (JS only).

Eric Horn
eric.horn@gmx.net

Möchten auch Sie einen kürzeren oder längeren Artikel im WebDesign-Newsletter veröffentlichen?
Gerne höre und sehe ich mir Ihre Vorschläge an. Senden Sie sie doch bitte an salvador@brauchbar.de.

Anm. der Redaktion:
Diese Lösung gefiel mir gut, lediglich zwei Dinge möchte ich vorschlagen. Die einzelnen Parameter sind angegeben, was sogar noch erlaubt, jede beliebige Einstellung zu erzeugen. Man achte auf die Breite 680.

Das ist natürlich nur ein Beispielwert, den man nie wirklich verwenden würde, da er auf 640x480 nicht funktioniert, völlig klar. Nein, es geht mir um etwas anderes.

Viele Besucher mögen es generell nicht, wenn man die Fenstergröße verändert. Sie surfen mit einem Browser, den Sie sich auf ihre Wunschgröße gezogen haben und haben keine Lust, ihn dauernd zu korrigieren.

Vorschlag 1: Streichen von width und height führt dazu, dass das neue Fenster die Größe des aktuell verwendeten hat. Man verwende die Größenangaben nur dann, wenn man einen wirklichen Grund dafür hat. Dies kommt meiner Meinung nach nicht so arg häufig vor.

(Das hier auszuführen, würde jetzt allerdings den Rahmen sprengen).

javascript:popopen('anzeige.html') sagt dem Browser, er soll die Funktion popopen() rufen und ihr als Parameter anzeige.html übergeben. Das funktioniert bestens. Nur eine Frage: Was sehen Besucher, die ohne JS kommen, sei es, weil der Browser es nicht kann oder weil sie JS abgeschaltet haben, was ihr gutes Recht ist?

Richtig, Sie sehen nichts. Absolut gar nichts, weil dort keine Aktion/Ziel für sie steht.

Vorschlag 2: In den Varianten 2 und 3 wird ein anderer Weg zu Referenzierung verwendet, der umständlicher ist, aber sowohl mit als auch ohne JavaScript funktioniert, so dass alle etwas sehen, obwohl natürlich nur die JS-Besucher das 'Fenster ohne alles' bekommen werden.

Variante 2

von Thomas Salvador.

<a href="test2.htm" target="_blank"
   onclick="window.open('test2.htm', 'Fenster','');
   return false;">test
</a>

Was auch immer Ihr Lieblingsbrowser ist, zur Qualitätssicherung sollten Sie Ihre Site mit den verbreitetesten Browsern betrachten.

Erstes Gebot der erfolgreichen JavaScript-Programmierung

Bei JavaScript ist es zwingend notwendig, mit IE und Navigator zu testen, da die beiden alles andere als kompatibel sind. Wenn Sie dies versäumen, vergessen Sie es! Das obige ist ein Beispiel, in den JS-Artikeln werden wir noch auf einige treffen.

Vorsicht, JavaScript ist aufgrund von Inkompatibilitäten und Änderungen immer für Überraschungen gut.

So habe ich beispielsweise 1997 ein Script in JS 1.0 geschrieben, welches auf dem Navigator 3.0 bestens läuft. Der Communicator 4.x stürzt bei seiner Ausführung jedoch ab! IE 3 und 5 laufen bestens. Ein Bug in C4? Mag sein, egal? Das hilft mir nicht. Es läuft nicht.

Theoretisch muss man immer die neuste Version und haben und testen, ob noch alles funktioniert.

Variante 3

von Thomas Salvador.

Das nachfolgende entspricht weitestgehend Variante 2 mit dem Unterschied, dass einige Parameter gesetzt werden.

<a href="test.htm"
   target="_blank"
   onclick="window.open('test.htm', 'Fenster',
   'menubar=no,scrollbars=yes');
   return false;">test
</a>

Testen!

Wie funktioniert diese Referenz? Zwei Fälle:

  1. Javascript ist aktiv:
    Clickt man auf die Referenz, so wird der onClick-Event ausgelöst, der in diesem Falle mittels window.open eine Datei test.htm in einem Fenster Mit dem Namen 'Fenster' öffnet. Existiert es noch nicht, wir es geschaffen. Abschießend wird mit return false die reguläre Verarbeitung der Referenz verhindert. D.h. das Browserfenster selbst bleibt unverändert.

  2. Javascript ist nicht aktiv:
    In diesem Falle wirkt die Referenz wie eine normale Referenz, d.h. Datei test.htm wird im Browserfenster geöffnet.

Allgemeiner Kommentar

JavaScript ist freilich Stolperstein Nummer 1, der zwischen dem Master und einer funktionierenden WebSite liegt. Eine Site, die heute noch bestens funktioniert hat, kann mit Erscheinen eines neuen Browsers oder einer neuen Version schwere Fehler aufweisen.

Aus Usability-Sicht ist oberste Vorsicht mit diesem Spielzeug geboten.

Meine dringende Empfehlung ist "Finger weg, wenn es irgendwie geht.

Niemand mag es,
wenn man ihm seine Standard-Navigation wegnimmt!

Es gilt hier, wie bei vielen anderen Dingen auch: "Nicht alles, was möglich ist, sollte auch getan werden."


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.


Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/24.html .