Up Down Left Right Tarkus-OnLine.de / WebDesign / Tipps / JS
WebDesign 4.3   TIPPS - Einsatz von JAVASCRIPT
Substitute symbol (Neue Rubrik 2004-05-08)
 
Ich setze an dieser Stelle die Grundlagen für die Arbeit mit Javascript als bekannt voraus und werde daher lediglich beschreiben, wie und warum ich es auf meinen eigenen Seiten einsetze. Basis-Wissen (und mehr!) über die Arbeit mit Javascript findet man zum Beispiel bei SelfHTML Externe Seite in neuem Fenster.
 
Auch wenn Javascript davon abhängig ist, dass der Besucher es in seinem Browser aktiviert haben muss, so leistet es doch mitunter Dienste, auf die man nicht verzichten möchte.
 
Auf Grund der weiten Verbreitung kann aber davon ausgegangen werden, dass es bei der Mehrzahl der Browser ohnehin aktiviert ist. Den Rest der Besucher sollte man allerdings darauf hinweisen, was bei ihnen eventuell nicht oder nur zum Teil funktionieren könnte.
Flower Graphic By Tarkus
 
Up Down Top 4.3.1 Zwei Seiten mit einem einzigen Klick öffnen
 
Mit purem HTML ist es nicht möglich, mit einem einzigen Klick zwei Seiten (in zwei Frames) gleichzeitig zu öffnen. Hierzu bedarf es etwas Javascript.
 
Die (mir) bisher bekannten Skripte rufen zwar in der Tat zwei Frames gleichzeitig auf, doch genau hier steckt ein Problem. Denn wenn der Browser das Skript nicht schluckt, dann passiert halt rein gar nichts!

 
 
Ich gehe deshalb einen etwas anderen Weg, der ebenfalls kurz ist und einen gewissen Vorteil hat. Basis ist das folgende (bekannte) Skript, welches oft dazu verwendet wird, ein Pop-up-Fenster zu öffnen.
 
<head>
...
<script type="text/javascript">
<!--
window.open("zusatzseite1.shtml","zielframe1");
window.open("zusatzseite2.shtml","zielframe2");

window.open("zusatzseite3.shtml","zielframe3");

//-->
</script>
...
</head>
 
<body>
...
<a href="zusatzseite1.shtml" target="zielframe1";>Zusatz-Seite 1</a>
<a href="zusatzseite2.shtml" target="zielframe2";>Zusatz-Seite 2</a>

<a href="zusatzseite3.shtml" target="zielframe3";>Zusatz-Seite 3</a>

...
</body>
 
Zunächst wird die wichtigere der beiden gewünschten Seiten wie gewohnt per Verweis aufgerufen. Diese Seite enthält dann (im head-Bereich) das obige Skript, mit dem dann automatisch die Zusatz-Seite in ihrem Zielframe aufgerufen wird. Für den Fall, dass beim Besucher kein Javascript aktiviert ist, biete ich alternativ (im body-Bereich) noch einen anklickbaren Verweis an.
 
Durch Ergänzung des Skriptes (abgedunkelt dargestellt) können auch noch weitere Seiten automatisch aufgerufen werden.
 
 
Beispiel: Der Effekt ist unter anderem an meinem Haupt-Menü erkennbar: Wenn dort eine Rubrik angeklickt wird, dann erscheint im rechten Frame das entsprechende Unter-Menü.
 
Dieses ruft nun seinerseits mittels des obigen Skriptes die zugehörige Inhalt-Seite im mittleren Frame auf. Zusätzlich wird im linken Frame (durch doppelte Anwendung des Skiptes) das passende Haupt-Menü aufgerufen (in welchem der zur aufgerufenen Seite passende Schalter im Highlight dargestellt wird).
 
Der bereits angedeutete Vorteil dieser Methode besteht darin, dass auch dann, wenn der Browser des Besuchers kein JavaScript ausführt, zumindest das passende Unter-Menü erscheint, aus dem man dann manuell die gewünschte Inhalt-Seite auswählen kann.
 
Flower Graphic By Tarkus
 
Up Down Top 4.3.2 Alternative, falls Javascript nicht aktiv(iert) ist
Substitute symbol (Neuer Tipp 2004-04-24)
 
Wenn man auf seinen Internet-Seiten Javascript einbindet, dann funktioniert dieses natürlich nur, wenn der Besucher in seinem Browser Javascript auch tatsächlich aktiviert hat.
 
Sollte dies nicht der Fall sein, kann man eine Alternative anbieten (und sei es, dass diese lediglich aus einem entsprechenden Hinweis besteht). Auch das geht mit Javascript! Dieser scheinbare Widerspruch erklärt sich wie folgt.
 
 
Das eigentlich gewollte Skript wird (mittels document.write) ergänzt um die CSS-Angabe "<span style="display:none; ">". Abschließend folgt ein weiteres Javascript(!) mit welchem die CSS-Angabe wieder aufgehoben wird: "</span>".
 
Dadurch wird das, was zwischen diesen beiden Javascript-Teilen steht, bei aktiviertem Javascript unterdrückt und nur bei nicht aktiviertem Javascript ausgeführt.
 
Hier ein einfaches Beispiel, bei dem ein Text ausgegeben wird, aus dem hervorgeht, ob Javascript aktiviert ist:
 
<script type="text/javascript">
document.write("<b>Javascript<\/b> ist bei dir <b>aktiviert<\/b>.");
document.write("<span style=\"display:none;\">");
</script>
 
Bei dir ist <b>Javascript nicht aktiviert</b>.
 
<script type="text/javascript">
document.write("<\/span>");
</script>

Hier nun das aktuelle Ergebnis des obigen Skriptes:
 
aniclock.gif Bei dir ist Javascript nicht aktiviert.
 
Statt eines einfachen Textes, wie in obigem Beispiel, kann im Grunde fast jedes beliebige Alternativ-Skript eingebunden werden.
 
Flower Graphic By Tarkus
 
Up Down Top 4.3.3 Ausführung nur wenn Javascript aktiv(iert) ist
Substitute symbol (Neuer Tipp 2004-05-08)
 
Ein spezielles Problem hat man, wenn man einen Teil der Internet-Seite, der kein Javascript enthält, dennoch nur dann ausführen will, wenn Javascript im Browser aktiviert ist, diese Ausführung aber nicht in eine Javascript-Anweisung integrieren kann oder will.
 
Wenn man beispielsweise Variablen sowohl mit Javascript als auch per SSI einbindet, dann könnte der Zusammenhang verloren gehen, wenn nur eines von beiden funktioniert. Um SSI muss man sich wenig Gedanken machen, da man schließlich weiß, ob der eigene Server es ausführt oder nicht. Javascript dagegen ist abhängig von der Browser-Konfiguration des Besuchers.
 
 
Die Methode, die Ausführung anderer Skript-Teile davon abhängig zu machen, ob Javascript im Browser aktiviert ist oder nicht, ist verblüffend simpel. Man sperrt einfach diese Bereiche und gibt sie per Javascript wieder frei.
 
 
Der Abschnitt, welcher nur dann ausgeführt werden soll, wenn im Browser des Besuchers Javascript aktiviert ist, wird zunächst (ohne Javascript!) unterdrückt, zum Beispiel mittels der CSS-Angabe "<span style="display:none; ">".
 
Nach diesem Abschnitt wird die Unterdrückung mit der Angabe "</span>" wieder aufgehoben. Alles, was zwischen diesen beiden Angaben steht, wird also zunächst nicht ausgeführt.
 
 
Nun kommt Javascript ins Spiel ! Unmittelbar vor dem gewünschten Abschnitt wird per Javascript (mittels document.write) die Unterdrückung wieder aufgehoben und unmittelbar anschließend an den Abschnitt mit einem weiteren Javascript wieder reaktiviert.
 
Der kritische Abschnitt wird also einerseits bei nicht aktiviertem Javascript unterdrückt, andererseits aber ausgeführt, wenn Javasript aktiviert ist, da dieses die Unterdrückung wieder aufhebt.
 
 
Hier ein Beispiel (in welchem nur dann ein Bild dargestellt werden soll, wenn Javascript aktiviert ist):
 
<span style="display:none; ">
 
<script type="text/javascript">
document.write("<\/span>");
</script>
 
Meine Signatur ...
<img src="pictures/webdesign/tarklogo.gif" alt="UlliFant"
style="width:111px; height:77px; ">
... der UlliFant! :o)
 
<script type="text/javascript">
document.write("<span style=\"display:none;\">");
</script>
 
</span>

Und hier nun das aktuelle Ergebnis des obigen Skriptes:
 
aniclock.gif Meine Signatur ... UlliFant ... der UlliFant! :o)
Sollte hier (außer evtl. einer Uhr) kein Bild zu sehen sein,
so ist auch das als ein Ergebnis anzusehen! :o)

 
 
Okay, das Bisschen da oben hätte man natürlich mit weit weniger Aufwand auch direkt mit Javascript (mittels document.write) erreichen können. Doch dies ist ja nur ein Beispiel.
 
Bei deutlich längeren Abschnitten würde aber die Ausgabe per Javascript schon wesentlich umständlicher. Wenn dann zu allem Überfluss auch noch zahlreiche Steuer-Zeichen maskiert werden müssen, ist es oft nicht mal mehr praktizierbar.
 
Der CSS-Befehl "display:none" ist übrigens nur als Beispiel-Methode der Ünterdrückung anzusehen. Hier sind der Phantasie des Webmasters kaum Grenzen gesetzt. ;o)
 
Flower Graphic By Tarkus
 
site-reload-mini.gif Reload Private WebSite by Ulli U. alias Tarkus © 1998-2024
ICRA
tarkus-online.de/webdesign_tipps_java.shtml
17,409 bytes saved on 2013-08-11 at 22:39 (CEST)
Impressum, Kontakt, Rechtliches siehe siehe rechts © K I D e-Mail