Webdesign mit JavaScript
Nick Heinle & Bill Pena
1.Auflage Juli 2002
ISBN 3-89721-275-7
282 Seiten
|
|
|
|
|
Webdesign mit JavaScriptNick Heinle & Bill Pena 1.Auflage Juli 2002 ISBN 3-89721-275-7 282 Seiten |
 |
 |
 |
 |
Vor langer Zeit war das Leben noch einfach: Es gab Standard-HTML und den Browser NDSA Mosaic. Dann kam der Netscape Navigator mit seinen HTML-»Erweiterungen«, und plötzlich bezeichneten sich Websites selbst als »Optimiert für Netscape« - was natürlich einfach bedeutete: »Diese Site sieht mit Mosaic scheußlich aus.« Als Microsoft den Internet Explorer einführte, war Mosaic bereits gestorben. Nun begann ein ständiger Kampf zwischen Netscape und Microsoft, bei dem beide Hersteller versuchten, HTML auf eine Art zu erweitern, die das eigene Produkt zum dominierenden Browser machen würde. Glücklicherweise haben beide JavaScript eingesetzt, allerdings in unterschiedlichem Maße, so daß JavaScript zwischen den beiden Browsern unterscheiden können muß.
Zu der Zeit, zu der dieses Buch geschrieben wurde, ist dieser Krieg eigentlich beendet. Der Microsoft Internet Explorer (IE) ist der bei weitem dominierende Browser, obwohl Netscape Jahre, nachdem es von America Online aufgekauft wurde, schließlich mit Netscape 6 doch noch einen aktualisierten Browser herausgebracht hat. Natürlich verwenden noch immer viele Menschen den Netscape Navigator, und viele andere verwenden ältere Versionen des Internet Explorer, so daß das Grundproblem bestehen bleibt: Wie finden Sie heraus, welchen Browser ein Besucher verwendet, und wie passen Sie Ihre Website entsprechend an?
In diesem Kapitel geht es darum, wie Sie Ihre Website sowohl für die verschiedenen Browser als auch für die verschiedenen Browserversionen bestmöglich gestalten können.
Bevor Sie lernen, wie JavaScript zwischen den verschiedenen Browsern unterscheidet, müssen Sie verstehen, wie JavaScript Informationen vom Browser einholt. Dies gilt sowohl für den Netscape Navigator als auch für den Internet Explorer.
JavaScript erkennt die Browser mit dem navigator-Objekt. »navigator« ist zwar der Name des Browsers von Netscape, aber in der IE-Implementierung von JavaScript erfüllt dieses Objekt dieselbe Funktion. Das navigator-Objekt liefert sehr viele Informationen, die wir alle in diesem Kapitel besprechen werden. Die Tabelle 6-1 zeigt die drei nützlichsten Eigenschaften, mit denen man Informationen über Browser einholen kann, und nennt die jeweiligen Betriebssysteme.
Ohne Kontext ist die Bedeutung dieser Eigenschaften wahrscheinlich noch nicht klar. Tabelle 6-2 zeigt einige einfache Beispiele dafür, was man zurückbekommt, wenn man diese Eigenschaften auf verschiedene Browser anwendet. Diese Liste ist keineswegs vollständig; sie nennt lediglich die Eigenschaften für einige wenige Konfigurationen, unter anderem auch für einige, die nur noch von historischem Interesse sind.
Nun erkennen Sie allmählich die Leistungsfähigkeit dieser Eigenschaften: Sie können bei allen Browsern den Namen, die Version und die Plattform ermitteln.
Die erste Eigenschaft, navigator.appName, ist die einfachste: Sie teilt nur den Namen des Browsers mit. Wenn Sie den Netscape Navigator verwenden, hat appName den Wert »Netscape«. Wenn Sie den Internet Explorer verwenden, ist der Wert »Microsoft Internet Explorer«.
Die zweite Eigenschaft, navigator.appVersion, gibt sowohl die Versionsnummer als auch die Plattform des Browsers zurück. Wenn Sie Netscape Navigator 4.0 nach seiner appVersion fragen, gibt der Browser »4.0 (Win95; I)« zurück, wie Sie auch in Tabelle 6-2 sehen. Dieser Wert ist zwar verständlich, viele andere Werte in der Spalte appVersion der Tabelle 6-2 jedoch nicht. Weitere Einzelheiten dazu finden Sie im Kasten »Browserversionen«.
Die dritte Eigenschaft, navigator.userAgent, kombiniert im Grunde genommen die ersten beiden Eigenschaften. Die Eigenschaft userAgent ist in der Welt der Browser nichts Neues; es gab sie schon lange vor JavaScript. Viele Server ermitteln mit den von userAgent gelieferten Informationen, mit welchen Browsern auf ihre Websites zugegriffen wird. Meist werden wir jedoch appName und appVersion verwenden, da sie alle Informationen enthalten, die wir benötigen.
Auf die Eigenschaften des navigator-Objekts können wir genau wie auf die jedes anderen Objekts zugreifen. Um z.B. den Namen eines Browsers auszugeben, übergeben Sie navigator.appName an document.write():
document.write("Hallo " + navigator.appName + " -Benutzer.");
Das ist allerdings nicht sonderlich sinnvoll. Wir prüfen die Identität der Browser, damit wir unsere Seiten (oder die ganze Site) entsprechend anpassen können. Der Rest dieses Kapitels wird sich ausschließlich damit befassen, wie man das macht.
Der Name und die Hauptversionsnummer (2, 3, 4 etc.) des Browsers bestimmen fast immer, welche Features ein Browser unterstützt. So unterstützt z.B. der IE 3 Microsofts Dynamic HTML-Version nicht, der IE 4 und höhere Versionen hingegen schon. Navigator 2 und IE 3 unterstützen das Ersetzen von Bildern mit JavaScript nicht, alle späteren Versionen beider Browser unterstützen es hingegen. Wenn Sie wissen, mit welchem Browser und welcher Version Sie es zu tun haben, dann wissen Sie auch viel darüber, welche Dokumente Sie bereitstellen können.
Browserversionen
Vielleicht kommen Ihnen die Werte für appVersion für den Internet Explorer in der Tabelle 6-2 eigenartig vor. So liefert z.B. der IE 3.0 für die Version 3.01 unter Windows 95 nicht den erwarteten Wert: »3.01 (Win95)«. Statt dessen bekommen wir »2.0 (compatible; MSIE 3.01; Windows 95)«. Der Grund hierfür ist, daß der Internet Explorer 3.0 ursprünglich versuchte, mit dem Navigator 2.0 und seiner Implementierung von JavaScript kompatibel zu sein. Dies bedeutete, daß er eine appVersion haben mußte, die denselben Wert wie der Navigator 2.0 zurückgab. (Natürlich ist 3.01 dennoch in der appVersion-Zeichenkette enthalten, nur eben nicht als erste Versionsnummer.)
Dieselbe Situation ergibt sich auch bei Internet Explorer 5, 5.5 und 6, die alle die appVersion 4.0 angeben.
Auch die appVersion, die für Netscape 6 angegeben wird, verdient Beachtung: Netscape 6 basiert auf Mozilla, einem Open-Source-Browser, der komplett neu geschrieben wurde. Allerdings beruhte Mozilla früher auf Netscapes altem Browsercode, also auf dem, was Netscape 5 gewesen wäre. Es gab zwar nie einen Navigator 5, aber die Versionsnummer blieb, und so gibt Mozilla - und damit auch Netscape 6 - die appVersion 5.0 zurück.
|
Um den Namen und die Versionsnummer des Browsers zu ermitteln, verwenden wir zwei der Eigenschaften, die Sie gerade kennengelernt haben: appName und appVersion. Damit das Skript zur Erkennung des Browsers kürzer wird, weisen wir die Werte dieser Eigenschaften zuerst zwei Variablen zu. Das Beispiel 6-1 zeigt den entsprechenden Code.
Zuerst weisen wir der Variablen browserName den Namen des Browsers zu. Die zweite Zeile weist der Variablen browserVersion die Browserversion zu. Beachten Sie, daß diese Zeile eine integrierte JavaScript-Funktion, parseInt(), verwendet, um den ganzzahligen Wert aus navigator.appVersion zu extrahieren. Das funktioniert folgendermaßen: Die appVersion von Netscape 6.01 auf Windows ME ist »5.0 (Windows; en-US)«. Wenn wir dies an parseInt() übergeben, lautet der Rückgabewert einfach 5, ist also eine ganze Zahl. Die appVersion des Internet Explorer 4.0 für Windows 95 ist »4.0 (compatible; MSIE 4.0b1; Windows 95)«. Wenn wir dies an parseInt() übergeben, ist der Rückgabewert 4.
Nachdem wir nun den Namen des Browsers und seine Hauptversionsnummer haben, müssen wir noch Übereinstimmungen mit den Namen und Nummern finden. Hierfür verwenden wir if-Anweisungen. Das Beispiel 6-2 zeigt eine if-Anweisung, die den Netscape 6 erkennt, wofür sie die im Beispiel 6-1 definierten Variablen browserName und browserVersion verwendet.
if (browserName == "Netscape" && browserVersion == 5) { document.write("Das ist Netscape 6"); } else { document.write("Das ist nicht Netscape 6"); }
Die if-Anweisung vergleicht den Namen und die Version des Browsers: Falls der Browsername »Netscape« lautet und die Version 5 ist, muß es sich um Netscape 6 handeln. Daher wird der Code innerhalb der geschweiften Klammern nach dem if ausgeführt, der »Das ist Netscape 6« an die Seite ausgibt. Falls der Browser nicht Netscape 6 ist, wird der Code in den geschweiften Klammern hinter else ausgeführt, der »Das ist nicht Netscape 6« ausgibt.
Indem wir ähnlich wie im Beispiel 6-2 eine Folge von if-Anweisungen kombinieren, können wir jeden Browser erkennen, der JavaScript unterstützt. Das Beispiel 6-3 zeigt, wie wir mit if-Anweisungen stückchenweise die Identität des Browsers ermitteln. Dieses Skript erkennt die beiden jüngsten Versionen des Navigator und die jüngsten vier Versionen des Internet Explorer.
var browser; if (browserName == "Netscape" && browserVersion == 5) { browser = "nn6"; // Netscape 6 } else if (browserName == "Netscape" && browserVersion == 4) { browser = "nn4"; // Navigator 4 } else if (browserName == "Microsoft Internet Explorer" && browserVersion == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1) { browser = "ie6"; // IE 6.0 } else if (browserName == "Microsoft Internet Explorer" && browserVersion == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1) { browser = "ie55"; // IE 5.5 } else if (browserName == "Microsoft Internet Explorer" && browserVersion == 4 && navigator.appVersion.indexOf("MSIE 5.0") != -1) { browser = "ie5"; // IE 5.0 } else if (browserName == "Microsoft Internet Explorer" && browserVersion == 4) { browser = "ie4"; // IE 4 }
Auf der Grundlage des Browsernamens und der Browserversion setzt dieses Skript die Variable browser auf eine von sechs möglichen Zeichenketten: »nn6«, »nn4«, »ie6«, »ie55«, »ie5« oder »ie4«, die für den Netscape Navigator 6 und 4 sowie den Internet Explorer 6, 5.5, 5 und 4 stehen. Es ist komplizierter, die verschiedenen Versionen des IE zu ermitteln, als die verschiedenen Versionen des Navigator zu erkennen, da IE 4, IE 5, IE 5.5 und IE 6 alle die Browserversion 4 melden. Um zwischen diesen Browsern zu unterscheiden, müssen wir den »MSIE #.#«-Teil von appVersion daher mit indexOf() ermitteln.
Mit diesen Informationen können wir nun anfangen, unsere Seiten an die Bedürfnisse der verschiedenen Browser anzupassen. Beispiel 6-4 zeigt das Grundgerüst eines HTML-Dokuments, das feststellt, welcher Browser verwendet wird, und den für diesen Browser passenden JavaScript-Code ausführt.
<html> <head> <title>Eine schlaue Seite</title> <script language="JavaScript"> // Prüfe Browsername und -version und weise die Informationen // einer Variablen zu. var browserName = navigator.appName; var browserVersion = parseInt(navigator.appVersion); var browser; if (browserName == "Netscape" && browserVersion == 5) { browser = "nn6"; } else if (browserName == "Netscape" && browserVersion == 4) { browser = "nn4"; } else if (browserName == "Microsoft Internet Explorer" && browserVersion == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1) { browser = "ie6"; } else if (browserName == "Microsoft Internet Explorer" && browserVersion == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1) { browser = "ie55"; } else if (browserName == "Microsoft Internet Explorer" && browserVersion == 4 && navigator.appVersion.indexOf("MSIE 5.0") != -1) { browser = "ie5"; } else if (browserName == "Microsoft Internet Explorer" && browserVersion == 4) { browser = "ie4"; } // Browserspezifischen Code verwalten. if (browser == "nn6" || browser == "ie6" || browser == "ie55" || browser == "ie5") { // Hierher gehört der neueste JavaScript-Code. } else if (browser == "nn4") { // Hierher gehört Netscape Navigator 4-spezifischer Code. } else if (browser == "ie4") { // Hierher gehört Internet Explorer 4-spezifischer Code. } </script> </head> <body> <!-- Hierher gehört Standard-HTML-Code --> </body> </html>
Diese Seite weiß immer, welcher Browser verwendet wird, und kann diese Informationen nutzen, um browserspezifischen Code auszuführen. Natürlich ist das Beispiel 6-4 nur eine Schablone (es zeigt nichts an), aber es kann Ihnen bei Ihren eigenen Webseiten weiterhelfen. Im folgenden Abschnitt werden wir uns einige konkrete Beispiele dafür ansehen, wie Sie mit Hilfe der Browsererkennung bestimmte Merkmale einer Webseite steuern können.
Es ist nicht gerade elegant, den Besuchern Aufforderungen wie z.B. »Wählen Sie die Netscape-optimierte Site« oder »Klicken Sie hier, wenn Sie einen Internet Explorer verwenden« zu präsentieren. Mit JavaScript können Sie für Ihre Besucher automatisch die richtige Auswahl treffen und ihnen diese Arbeit ersparen. Mit welchem Verfahren Sie browserspezifische Merkmale behandeln, hängt davon ab, wie viele Seiten diese Merkmale nutzen. Manchmal muß man nur ein einzelnes Element einer Seite in Code zur Browsererkennung hüllen. In anderen Fällen ist es hingegen erforderlich, für verschiedene Browser völlig verschiedene Seiten einzurichten.
In den frühen Tagen von JavaScript ermittelte man mit der Browsererkennung häufig, ob auf einer Webseite Rollover-Bilder verwendet werden konnten (dazu erfahren Sie in Kapitel 7 mehr). Rollover-Bilder werden ab dem Navigator 3 und dem IE 4 unterstützt, nicht jedoch von älteren Browsern. Websites, die solche Bilder verwendeten, mußten deshalb die Browserversion prüfen und sich entsprechend verhalten. Heute kann man natürlich zumindest einen Browser der Version 4 voraussetzen, so daß die Browsererkennung für Rollover-Bilder eigentlich nicht mehr erforderlich ist, sofern man nicht auch sehr alte Browser (z.B. Navigator 2 und IE 3) unterstützen möchte.
Wenn Sie Rollover-Bilder verwenden möchten und sehr alte Browser unterstützen müssen, können Sie mit Hilfe der Browsererkennung sicherstellen, daß Ihre Seite sich richtig verhält. Bei Rollover-Bildern funktioniert dieses Verfahren gut, da Sie ohne Auswirkungen auf das Gesamt-Layout der Seite einfach statische Bilder anzeigen können, wenn dynamische nicht unterstützt werden.
Abbildung 6-1 zeigt eine Seite, die einfache Rollover-Bilder verwendet. Wenn der Anwender den Cursor über eines der kreisförmigen Bilder am unteren Rand der Seite bewegt, wird der Schatten umgekehrt und dieses Bild dadurch als aktive Schaltfläche gekennzeichnet. Das Skript prüft zuerst auf Navigator 3 oder höher oder IE 4 oder höher. Falls der Browser diese Bedingungen erfüllt, wird browser auf »rollover« gesetzt, ansonsten auf »norollover«. Beispiel 6-5 veranschaulicht, wie man die Browsererkennung um ein einzelnes Rollover-Bild hüllen kann.
<html> <head> <title>Ein schlauer Rollover-Button</title> <script language="JavaScript"> var browserName = navigator.appName; var browserVersion = parseInt(navigator.appVersion); var browser; // Ermittle, ob Rollover-Bilder unterstützt werden. if ((browserName == "Netscape" && browserVersion >= 3) || (browserName == "Microsoft Internet Explorer" && browserVersion >= 4)) { browser = "rollover"; } else { browser = "norollover"; } </script> </head> <body> <a href="travel.html" onMouseOver="if (browser=='rollover') document.travel.src='travel_on.gif';"> <img name="travel" src="travel_off.gif" border="0" height="77" width="83"></a> </body> </html>
Der Einfachheit halber ist der Hauptteil der Seite sehr kurz. Wenn die Maus über den Bild-Link bewegt wird, wird der Code im Event-Handler onMouseOver ausgeführt. Dieser Code nutzt die Fähigkeit von JavaScript, dynamische Bilder anzuzeigen, um das Bild (travel) so zu ändern, daß es hervorgehoben erscheint. Der wichtige Teil dieses Event-Handlers ist die if-Anweisung. Sie sorgt dafür, daß das Bild nur dann hervorgehoben wird, wenn browser gleich »rollover« ist, d.h., wenn der Browser dynamische Bilder behandeln kann. (Machen Sie sich jetzt keine Gedanken darüber, wie die Rollover-Bilder funktionieren; damit befassen wir uns in Kapitel 7 ausführlich. Hier geht es nur darum, wie die Browsererkennung funktioniert.)
Wesentlich häufiger verwendet man die Browsererkennung heute für Seiten, die Dynamic HTML (DHTML) verwenden, das in verschiedener Hinsicht von der Browserversion abhängt. (DHTML behandeln wir in Kapitel 9 und Kapitel 10 ausführlich.) Falls Ihre Seite nur ein einziges DHTML-Element verwendet, das für Browser, die DHTML nicht unterstützen, leicht durch Standard-HTML ersetzt werden kann, können Sie die Seite für verschiedene Browser anpassen, indem Sie für dieses Element die Browsererkennung verwenden. Das Beispiel 6-6 zeigt, daß Sie in diesem Fall mindestens vier Verzweigungen benötigen: für Netscape 6, für IE 4 und höher, für Navigator 4 und für alle älteren Browserversionen.
<html> <head> <title>Eine schlaue DHTML-Seite</title> <script language="JavaScript"> var browserName = navigator.appName; var browserVersion = parseInt(navigator.appVersion); var browser; if (browserName == "Netscape" && browserVersion >= 5) { browser = "nn6up"; } else if (browserName == "Netscape" && browserVersion == 4) { browser = "nn4"; } else if (browserName == "Microsoft Internet Explorer" && browserVersion >= 4) { browser = "ie4up"; } </script> </head> <body> <script language="JavaScript"> // Verzweigungen für verschiedene DHTML-Implementierungen und // die Standard-HTML-Version if (browser == "nn6up") { // DHTML für Netscape 6 (DOM-Standard) gehört hierher. } else if (browser == "nn4") { // DHTML für Netscape Navigator 4 gehört hierher. } else if (browser == "ie4up") { // Microsoft-spezifischer DHTML-Code gehört hierher. } else { // Standard-HTML-Ersatz gehört hierher. } </script> </body> </html>
Nachdem es ermittelt hat, welcher Browser verwendet wird, bietet das Skript Platz für drei verschiedene Implementierungen eines DHTML-Elements und eine für den Standard-HTML-Ersatz. Sicher können Sie sich vorstellen, daß Ihre Seiten durch diese vier Verzweigungen sehr schnell unübersichtlich werden, falls Sie DHTML in Ihren Seitenentwurf aufnehmen. In diesem Fall sollten Sie für die Browsererkennung ein anderes Verfahren verwenden, z.B. die Einzelframe-Methode, die wir im folgenden Abschnitt besprechen werden.
Wenn Sie auf Ihrer Website sehr viele browserspezifische Merkmale verwenden, sollten Sie für die verschiedenen Browser verschiedene Seiten schreiben. Das gilt besonders, wenn Sie Merkmale verwenden, die sich sehr stark auf das Layout und die Funktion Ihrer Seiten auswirken. Falls dies zutrifft, ist die Einzelframe-Methode für Sie geeignet. Bei der Einzelframe-Methode ermittelt ein Skript den Browsertyp, erzeugt für den Anwender einen einzigen Frame und zeigt darin eine Seite an, deren Inhalt für diesen Browser geeignet ist.
Die Einzelframe-Methode ist die einfachste und zuverlässigste Art, verschiedene Browser zu verschiedenen Seiten zu leiten. Außerdem ist sie unsichtbar: Da sie einen einzigen Frame verwendet, sieht der Anwender keine Frameränder, sondern nur die Seite. Wenn Ihre Seite also viele ActiveX-Steuerelemente und andere IE-spezifische Technologien verwendet, können Sie sie mit dieser Methode vor dem Navigator »schützen«. Falls der Anwender den Navigator verwendet, können Sie ihm eine Seite anzeigen, die keinen IE-spezifischen Code enthält.
Wenn Ihre Webseiten sehr viel DHTML verwenden, sollten Sie eventuell die Einzelframe-Methode verwenden. In diesem Beispiel leiten wir die Besucher, die den IE 4 oder höher verwenden, an eine Seite weiter, die die Microsoft-Implementierung von DHTML umfassend nutzt. Für Netscape 6 verwenden wir eine Seite, die das auf dem W3C-Standard-DOM beruhende DHTML unterstützt, da Netscape 6 (größtenteils) das Standard-DOM1 unterstützt. Besucher mit Netscape 4 werden an eine Seite mit der eingeschränkten DHTML-Funktionalität weitergeleitet, die von diesem Browser unterstützt wird. Die Benutzer aller älteren Browser werden an eine Seite weitergeleitet, die ganz auf DHTML verzichtet. Beispiel 6-7 zeigt den vollständigen HTML-Code.
<html> <head> <title>Eine schlaue DHTML-Seite</title> <base target="_top"> <script language="JavaScript"> var browserName = navigator.appName; var browserVersion = parseInt(navigator.appVersion); var browser; if (browserName == "Netscape" && browserVersion >= 5) { browser = "nn6up"; } else if (browserName == "Netscape" && browserVersion == 4) { browser = "nn4"; } else if (browserName == "Microsoft Internet Explorer" && browserVersion >= 4) { browser = "ie4up"; } // Frame für IE 4 und höher mit Microsofts Dynamic HTML if (browser == "ie4up") { document.write('<frameset rows="100%,*" frameborder="no" border="0"'); document.write('marginheight="5" marginwidth="5">'); document.write('<frame src="ms_dhtml.html" scrolling="auto">'); document.write('</frameset>'); } // Frame für Netscape 6 mit DOM-Standard-DHTML else if (browser == "nn6up") { document.write('<frameset rows="100%,*" frameborder="no" border="0"'); document.write('marginheight="5" marginwidth="5">'); document.write('<frame src="dom_dhtml.html" scrolling="auto">'); document.write('</frameset>'); } // Frame für Navigator 4 mit eingeschränktem DHTML else if (browser == "nn4") { document.write('<frameset rows="100%,*" frameborder="no" border="0"'); document.write('marginheight="5" marginwidth="5">'); document.write('<frame src="nn4_dhtml.html" scrolling="auto">'); document.write('</frameset>'); } </script> </head> <body bgcolor="#FFFFFF"> <!-- Hier folgt das, was ältere Browser sehen; es sollte kein DHTML enthalten. --> </body> </html>
Der JavaScript-Code befindet sich im Kopf des Dokuments, das den Einzelframe definiert. Zuerst werden der Name und die Version des Browsers ermittelt. Wir kümmern uns um drei Fälle: Netscape 6 oder höher, Navigator 4 und IE 4 oder höher. Diese Browserversionen entsprechen den Werten »nn6up«, »nn4« und »ie4up« der Variablen browser. Falls der Anwender keinen dieser Browser verwendet, wird die Variable browser nicht gesetzt.
Anschließend erzeugen wir für jeden Browsertyp einen Einzelframe. Falls der Browser IE 4 oder höher ist, erzeugt das Skript einen Einzelframe, der ms_dhtml.html anzeigt (die Seite, die Microsofts DHTML-Implementierung verwendet). Falls der Browser Netscape 6 oder höher ist, erzeugt das Skript einen Frame, der dom_dhtml.html anzeigt. Und falls es sich um den Navigator 4 handelt, zeigt der Frame nn4_dhtml.html an. Da wir den Browser nicht an eine andere Seite weiterleiten, sondern für jede Seite einen einzigen Frame erzeugen, ist dies alles für den Besucher unsichtbar.
Was ist nun mit den Rändern des Frames? Kein Problem: Wenn wir das Frameset erstellen, setzen wir die erste Zeile auf 100 % und die zweite auf nichts. Wenn dann der Einzelframe definiert wird, nimmt er das vollständige Browserfenster ein. Überraschenderweise hat es keinerlei negative Auswirkungen, wenn wir den zweiten Frame weglassen. Die Einzelframe-Methode hat noch einen weiteren Vorteil: Da wir Frames verwenden (wenn auch nur einen), können wir nun für die Seite einen Rand festlegen.
Wenn Sie diese Methode verwenden, sollten Sie die folgende Zeile in den head Ihrer HTML-Dokumente einfügen:
<base target="_top">
Dieses HTML-Fragment stellt sicher, daß alle Links, die nicht auf einen bestimmten Frame oder ein bestimmtes Fenster verweisen, in das Browserfenster der obersten Ebene geladen werden.
Die Browsererkennung kann Ihnen auch dadurch bei der Verbesserung Ihrer Webseiten helfen, daß sie es ermöglicht, eine Seite anzuzeigen, die auch in verschiedenen Browsern immer gleich aussieht. Sie wissen wahrscheinlich bereits aus eigener Erfahrung, daß die unterschiedlichen Standardschriftgrößen, die unterschiedlichen Standardränder und selbst die unterschiedliche Farbwiedergabe aus einer Seite, die in einem Browser ansprechend aussieht, in einem anderen Browser zu einem unlesbaren Durcheinander führen können.
Eines der auffälligsten Beispiele dafür, wie unterschiedlich die Browser Seiten wiedergeben, sind die uneinheitlichen Standardschriftgrößen in verschiedenen Versionen des Netscape Navigator und des Internet Explorer. Formularelemente bereiten ebenfalls Probleme; ihre Größe und ihre Ränder weichen in den verschiedenen Browsern stark voneinander ab. Selbst die Verwendung von Cascading Style Sheets (CSS) löst diese Probleme nicht, da die Browser die Stile unterschiedlich anwenden. Insgesamt zwingen diese Unterschiede die Designer, alle Zielbrowser ständig zu prüfen, damit ihre Seiten auf allen Plattformen akzeptabel aussehen.
Mit JavaScript brauchen Sie sich nicht mit einem akzeptablen Erscheinungsbild zu begnügen: Wenn wir ein wenig Code zur Browserermittlung mit Stylesheets kombinieren, die verschiedene Browser berücksichtigen, können wir eine für alle Browser konsistente Seiten erstellen. Sehen wir uns zuerst das Problem, das wir lösen möchten, genauer an. Beispiel 6-8 zeigt ein einfaches Formular, das ein einziges Stylesheet verwendet: styles.css.
<html> <head> <title>Ein Formular</title> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <form name="form1" method="post" action=""> <table border="0" width="100%" cellpadding="3"> <tr> <th bgcolor="#00FF00"> <span>Bitte füllen Sie folgendes Formular aus:</span> </th> </tr> <tr> <td> <input type="text" name="textfeld" value="Hier Begriffe eingeben" size="20"> <select name="auswahl"> <option>Standardauswahl</option> <option selected>Auswahl 2</option> <option>Auswahl 3</option> </select> <input type="submit" name="abschicken" value="abschicken"> </td> </tr> <tr> <td> <p>Sollen wir Sie auf unsere Mailingliste setzen?</p> <input type="radio" name="radiobutton" value="radiobutton">ja<br> <input type="radio" name="radiobutton" value="radiobutton">nein </td> </tr> <tr> <td> <input type="checkbox" name="checkbox" value="checkbox">Erinnern Sie mich bitte.</td> </tr> </table> </form> </body> </html>
Achten Sie darauf, wie wir mit dem Tag link das Stylesheet styles.css in das HTML-Dokument einfügen. Abbildung 6-2 zeigt, wie unterschiedlich dieses Formular trotz der Verwendung eines einzigen Stylesheets im Navigator 4 und im IE 5.5 aussieht.
Dieses Problem können wir lösen, indem wir die Browsererkennung nutzen, um unsere HTML-Dokumente je nach Browser, mit dem sie betrachtet werden, mit verschiedenen CSS-Dateien zu verbinden. Anschließend können wir unseren Entwurf auf den Browser zuschneiden und unsere eigenen Stile an die Standardstile des Browsers anpassen. Individuell angepaßte Stylesheets sind wesentlich einfacher und schneller zu erstellen als vollständige angepaßte HTML-Dokumente. Außerdem können wir uns so auf die Feinheiten des Entwurfs beschränken, auf die es uns ankommt. Beispiel 6-9 zeigt den JavaScript-Code, der für den Navigator 4 und den IE 5.5 verschiedene Stylesheets in unser Formular einfügt.
<html> <head> <title>Ein schlaues Formular</title> <script language="JavaScript"> var browserName = navigator.appName; var browserVersion = parseInt(navigator.appVersion); var browser; if (browserName == "Netscape" && browserVersion == 4) { browser = "nn4"; } else if (browserName == "Microsoft Internet Explorer" && browserVersion == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1) { browser = "ie55"; } // Setze das link-Tag, um das browserspezifische // Stylesheet einzufügen. document.write('<link rel="stylesheet" href="' + browser + '.css" '); document.write('type="text/css">'); </script> </head>
Falls der Browser der Navigator 4 ist, fügt das Skript nn4.css ein, beim IE 5.5 hingegen das Stylesheet ie55.css. Der Einfachheit halber ermittelt das Beispiel nur diese zwei Browser; Sie sehen daran jedoch, wie Sie das Skript für die Behandlung weiterer Browser ausbauen können. Abbildung 6-3 zeigt, daß unsere Formulare mit browserspezifischen Stilen im Navigator 4 und IE 5.5 nun wesentlich konsistenter aussehen.
Da es im Internet sehr viele Plug-Ins für verschiedene Arten von Inhalten gibt, wissen Sie nie, ob ein Anwender für Ihren Inhalt genau die richtige Version eines Plug-Ins benutzt. Die meisten Browser versuchen zwar zu helfen, indem sie erkennen, wann ein Inhalt ein nicht verfügbares Plug-In erfordert, und um dann den Anwender zu fragen, ob er dieses Plug-In installieren möchte; mit JavaScript können wir es aber noch besser machen.
Im Navigator 3 und höher sowie im IE 5 und höher auf dem Mac kann JavaScript ermitteln, welche Plug-Ins in einem Browser installiert sind und welche Dateitypen (PDF, MP3 usw.) er unterstützt. Die beiden Objekte, die dies ermöglichen, sind nagivator.plugins und navigator.mimeTypes. Das erste, nagivator.plugins, enthält die Namen und Beschreibungen aller im Browser installierten Plug-Ins. Das zweite, navigator.mimeTypes, gibt an, welche Dateitypen der Browser verarbeiten kann.
Beim IE auf Windows-Systemen ermittelt man auf ganz andere Art, ob ein bestimmtes Plug-In installiert ist, aber auch diese Browser können wir mit JavaScript unterstützen, wie Sie bald sehen werden.
Wenn ein Webserver ein Dokument an einen Webbrowser sendet, fügt er Informationen über den Typ der gesendeten Datei ein. Mit diesen Informationen, dem sogenannten MIME-Typ, ermittelt der Browser, wie er die Datei behandeln muß, also ob er den Inhalt im Fenster anzeigen oder das passende Plug-In oder eine Hilfsanwendung starten muß. Ein PDF-Dokument hat z.B. den MIME-Typ application/pdf und ein Flash-Film den MIME-Typ application/x-shockwave-flash. Die MIME-Typen, die ein Browser unterstützt, zeigen fast immer, welche Plug-Ins installiert sind. Anders ausgedrückt: Wenn ein Browser den MIME-Typ application/x-shockwave-flash unterstützt, ist wahrscheinlich das Flash-Plug-In installiert.
Um die Fähigkeit von JavaScript, den MIME-Typ zu erkennen, zu nutzen, übergeben wir wie im Beispiel 6-10 nagivator.mimeTypes den Dateityp, den wir suchen. Falls dieser Dateityp gefunden wird, gibt das Objekt true zurück, anderenfalls gibt es false zurück.
if (navigator.mimeTypes["application/x-shockwave-flash"]) { document.write("You have Flash!"); } else { document.write("You do not have Flash."); }
Beachten Sie, daß wir den gesuchten MIME-Typ, application/x-shockwave-flash, hinter dem Verweis auf navigator.mimeTypes in doppelten Anführungszeichen innerhalb eckiger Klammern angeben. Dies liegt daran, daß mimeTypes ein Array ist, das alle im Browser unterstützten MIME-Typen auflistet. Im Gegensatz zu den Arrays, die wir in Kapitel 5 gesehen haben und die mit Zahlen auf ihre Elemente zugegriffen haben, verwendet mimeTypes jedoch Zeichenketten-Werte. Diese Art von Array bezeichnet man als assoziatives Array. Assoziative Arrays sind nützlich, da sie eine aussagekräftigere Möglichkeit bieten, die Elemente im Array zu verfolgen, nämlich mit einem Namen anstelle einer Zahl.
Die if-Anweisung in Beispiel 6-10 ermittelt, ob der MIME-Typ Flash im Array mimeTypes vorhanden ist. Falls für application/x-shockwave-flash ein Element definiert ist, ist die if-Anweisung true, und die Nachricht »You have Flash!« wird auf dem Bildschirm ausgegeben. Falls es im Array kein entsprechendes Element gibt, ist die if-Anweisung hingegen false, und die Nachricht »You do not have Flash.« wird ausgegeben.
Natürlich geht es uns eigentlich darum, einen Flash-Film anzuzeigen, falls der MIME-Typ Flash gefunden wird, und anderenfalls einen Link anzugeben, über den man das Plug-In für Flash herunterladen kann. So gehen die meisten Websites vor, die Flash verwenden. Abbildung 6-4 und Abbildung 6-5 zeigen Beispiele hierfür.
Besucher der Website Shockwave.com benötigen das Plug-In für Flash, wie Abbildung 6-5 zeigt. Das ist durchaus vernünftig, da es auf dieser Site ausschließlich um Flash geht. Je nach den Zielen Ihrer Website können Sie auch einen flexibleren Ansatz wählen und mehr Besucher ansprechen, indem Sie eine Version mit und eine ohne Flash anbieten.
Schreiben wir also ein Skript, das je nach der Konfiguration des Anwenders völlig unterschiedliche Seiten anzeigt. Hierbei gibt es die folgenden Möglichkeiten:
Dieses Skript kümmert sich um Navigator- und IE/Mac-Nutzer, läßt IE/Windows-Nutzer Flash automatisch als Steuerelement herunterladen und alle anderen Besucher selbst entscheiden, was sie machen möchten. Beispiel 6-11 zeigt das Skript:
<html> <head> <title>Eine schlaue Flash-Seite</title> <script language="JavaScript"> var browser; // Ermittle, ob der Browser das Array mimeTypes unterstützt. if (navigator.mimeTypes && navigator.mimeTypes.length != 0) { browser = "mimeTypes" } else { browser = "noMimeTypes" } </script> </head> <body> <script language="JavaScript"> // Falls der Browser mimeTypes unterstützt... if (browser == "mimeTypes") { // Zeige das Plug-In für Flash auf der Seite an, falls es gefunden wird. if (navigator.mimeTypes["application/x-shockwave-flash"]) { document.write('<embed src="movie.swf" height="320" width="240">'); } // Zeige ansonsten Links zum Herunterladen des Plug-Ins oder eine Flash-freie Site an. else { document.write('<p><a href="http://www.macromedia.com/downloads/">'); document.write('Flash Player herunterladen</a>'); document.write('<p><a href="noflash.html">zu den Seiten ohne Flash</a>'); } } // Verwende beim IE das object-Tag, um den Film im ActiveX-Steuerelement für Flash zu // öffnen, oder lade dieses herunter, falls es nicht vorhanden ist. else if (navigator.appName == "Microsoft Internet Explorer") { document.write('<object '); document.write('classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'); document.write('codebase='); document.write('"http://download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=4,0,2,0"'); document.write('width="240" height="320" name="Flash" id="movie">'); document.write('<param name="src" value="movie.swf">'); document.write('<param name="bgcolor" value="#000000">'); document.write('</object>'); } // Zeige anderenfalls Links für eine Flash-Site, für eine Flash-freie Site und // zum Herunterladen des Plug-Ins an. else { document.write('<p><a href="flash.html">zu den Seiten mit Flash</a>'); document.write('<p><a href="noflash.html">zu den Seiten ohne Flash</a>'); document.write('<p><a href="http://www.macromedia.com/downloads/">'); document.write('Flash Player herunterladen</a>'); } </script> </body> </html>
Das Skript prüft zuerst, ob der Browser das Array navigator.mimeTypes unterstützt. Das hier gezeigte Verfahren ist eine weitere Möglichkeit, die Browserversion zu prüfen, und wird als Objekterkennung bezeichnet. Die Objekterkennung prüft nicht den Namen und die Version eines Browsers, sondern ermittelt, ob ein bestimmtes Objekt vorhanden ist, in diesem Fall also das Objekt mimeTypes. Dieses Verfahren ist wesentlich einfacher, als wenn wir prüfen, ob der Browser der Navigator 3 oder höher oder der IE 5 oder höher auf einem Mac ist, und es liefert dieselben Ergebnisse. Falls das Objekt mimeTypes unterstützt wird, wird die Variable browser auf »mimeTypes« gesetzt. Anderenfalls wird sie auf »noMimeTypes« gesetzt.
Falls der Browser mimeTypes unterstützt, ermittelt das Skript, ob das Plug-In für Flash vorhanden ist, indem es den MIME-Typ application/x-shockwave-flash sucht. Findet es diesen MIME-Typ, so zeigen wir den Flash-Film mit dem Tag embed an. Findet das Skript den MIME-Typ hingegen nicht, so zeigen wir Links an, über die man das Plug-In herunterladen oder die Flash-freie Site wählen kann.
Falls der Browser der IE (unter Windows) ist, zeigen wir mit dem Tag object das ActiveX-Steuerelement für Flash an. Falls dieses Steuerelement auf dem System des Anwenders nicht zur Verfügung steht, geben wir diesem die Möglichkeit, es herunterzuladen.
Und falls JavaScript Flash nicht finden kann, zeigen wir eine Seite mit allen in Frage kommenden Möglichkeiten an - die Flash-Site starten, die Flash-freie Site starten oder das Plug-In für Flash herunterladen -, damit die Anwender selbst entscheiden können, was sie machen möchten.
JavaScript ist nicht darauf beschränkt, Browser und Plug-Ins zu erkennen; es kann auch erkennen, auf welchem Betriebssystem ein Browser ausgeführt wird. Wie wir in der Tabelle 6-2 gesehen haben, enthält die Eigenschaft navigator.appVersion auch Informationen über das Betriebssystem. Die Tabelle 6-3 zeigt die appVersion-Werte für einige Betriebssysteme (die Informationen über die Browserversion haben wir weggelassen, da sie hier nicht relevant sind).
| Betriebssystem |
appVersion |
|---|---|
| Windows 2000 |
Windows NT 5.0; U |
| Windows 98 |
Win98; U |
| Windows 95 |
Win95; I |
| Windows 3.1 |
Win16; I |
| Macintosh PPC |
Macintosh; I; PPC |
| Linux (Unix) |
X11; U; Linux |
Mit diesem Wissen können Sie nun einfache Funktionen erstellen, die ermitteln, welches Betriebssystem ein Besucher verwendet. Beispiel 6-12 zeigt eine Funktion, die mit indexOf() erkennt, ob ein Browser unter Windows 98 läuft.
function istWin98() { if (navigator.appVersion.indexOf("98") != -1) { return true; } else { return false; } }
Mit dieser Funktion, die true zurückgibt, falls der Browser unter Windows 98 läuft, können Sie Teile Ihrer Seite ebenso anpassen, wie Sie es beim Skript zur Browsererkennung gemacht haben. Ein Beispiel hierzu:
if (istWin98()) {
document.write("Sie haben Windows 98 installiert.");
}
Ist die Plattform Windows 98, so gibt das Skript »Sie haben Windows 98 installiert.« aus.
Stellen Sie sich das so vor: Was in der appVersion steckt, können Sie auch finden. Diese Fähigkeit eröffnet zahlreiche Möglichkeiten. Nehmen wir z.B. an, Ihre Firma entwickle Software für verschiedene Betriebssysteme. Wenn ein Besucher von Ihrer Website Software herunterlädt, können Sie sein Betriebssystem mit JavaScript ermitteln, so daß er es nicht selbst anzugeben braucht.
Außerdem können Sie die Betriebssystemerkennung problemlos mit der Browsererkennung oder der Plug-In-Erkennung verbinden. Sie alle sind austauschbar. Ihre Besucher brauchen nie wieder Entscheidungen zu treffen, die auf ihrer Soft- oder Hardware beruhen: Sie können dies für ihre Besucher tun.
| |
|
|
|
© 2002, O'Reilly Verlag GmbH & Co. KG