JS - Informatie over de browser

Met behulp van JavaScript kun je bepalen welke browser de bezoeker van je pagina gebruikt en op basis daarvan een gebeurtenis laten plaats hebben. Dat kan bijvoorbeeld handig zijn als in je pagina mogelijkheden opgenomen zijn, welke niet door alle browsers ondersteund worden. Met gebeurtenissen, welke afhankelijk zijn van de browser, kun je bijvoorbeeld ook voorkomen dat bezoekers geconfronteerd worden met fouten in hun browser (zie bijvoorbeeld het onderdeel CSS en browsers).

De volgende voorbeelden worden gegeven:

• Informatie over de browser weergeven
• Browsertest
• Document openen afhankelijk van browser
• Algemeen script voor browsertest

Informatie over de browser weergeven

Met de eigenschappen appName, appVersion, appCodeName en userAgent van het navigator object kan informatie over de gebruikte browser weergegeven worden, uiteraard alleen als de browser JavaScript ondersteund. Voor de browser, waarmee deze pagina bekeken wordt, ziet de informatie er als volgt uit:

In de Body van dit document is voor de appName eigenschap het volgende script opgenomen:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
document.write(navigator.appName);
//-->
</SCRIPT>

Voor de overige eigenschappen gaat het op een vergelijkbare manier.

De informatie, welke gegeven wordt door de verschillende eigenschappen, kun je in een nieuw venster bekijken voor Internet Explorer, Mozilla, Netscape Navigator en Opera.

Browsertest

In het volgende voorbeeld wordt getest, of de bezoeker een bepaalde browser gebruikt.

Het JavaScript dat voor de test gebruikt wordt, heeft de volgende opzet:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
if (testcode) {
document.write("ja");
}
else {
document.write("nee");
}
//-->
</SCRIPT>

Hierna wordt voor enkele browsers het script toegelicht. Voor andere browsers is de code die je in het script in plaats van het woord testcode invult, te zien in een nieuw venster

Voor Microsoft Internet Explorer 5.0, 5.5 en 6.0 test je in navigator.userAgent op "MSIE 5.0", respectievelijk "MSIE 5.5" en "MSIE 6.0". Omdat Opera ook gebruik kunnen maken van dit kenmerk, moet je een extra test opnemen: in navigator.userAgent mag de tekst "Opera" niet voor komen.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!-- test Microsoft Internet Explorer 5.0
if ((navigator.userAgent.indexOf("MSIE 5.0") != -1) &&
(navigator.userAgent.indexOf("Opera") == -1)) {
document.write("ja");
}
else {
document.write("nee");
}
//-->
</SCRIPT>

Zorg er voor dat de code tussen de haakjes achter het if-statement niet onderbroken wordt door een harde overgang naar de volgende regel.

Voor Netscape Navigator 4 test je in navigator.appName op "Netscape" en in navigator.userAgent op "Mozilla/4". Omdat Opera ook gebruik kan maken van deze kenmerken, moet je weer een extra test opnemen: in navigator.userAgent mag de tekst "Opera" niet voor komen.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!-- test Netscape Navigator 4
if ((navigator.appName == "Netscape") &&
(navigator.userAgent.indexOf("Mozilla/4") != -1) &&
(navigator.userAgent.indexOf("Opera") == -1)) {
document.write("ja");
}
else {
document.write("nee");
}
//-->
</SCRIPT>

Voor Netscape Navigator 6 test je op de aanwezigheid van "Mozilla/5" en "Netscape6" in navigator.userAgent. De tekst "Opera" mag ook hier niet in navigator.userAgent voor komen.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!-- test Netscape Navigator 6
if ((navigator.userAgent.indexOf("Mozilla/5") != -1) &&
(navigator.userAgent.indexOf("Netscape6") == -1) &&
(navigator.userAgent.indexOf("Opera") == -1)) {
document.write("ja");
}
else {
document.write("nee");
}
//-->
</SCRIPT>

Voor de browser Mozilla 1 moet in navigator.userAgent "Mozilla/5" wel voorkomen, maar "Netscape" en "Opera" juist niet. Om (toekomstige) verwarring met nieuwere versies van Internet Explorer te voorkomen controleer je of "Gecko" in navigator.userAgent voorkomt. Verder wordt een controle op het versienummer toegevoegd.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!-- test Mozilla 1
if ((navigator.userAgent.indexOf("Mozilla/5") != -1) &&
(navigator.userAgent.indexOf("Netscape") == -1) &&
(navigator.userAgent.indexOf("Opera") == -1) &&
(navigator.userAgent.indexOf("Gecko") == -1) &&
(navigator.userAgent.indexOf("rv:1") != -1)) {
document.write("ja");
}
else {
document.write("nee");
}
//-->
</SCRIPT>

In Opera 4 en hoger kan de gebruiker instellen als welke browser het programma geïdentificeerd moet worden. De waarde van navigator.userAgent heeft daardoor verschillende uitkomsten. Voor Opera 4 moeten we daarom testen op de aanwezigheid van de tekst "Opera 4" of de tekst "Opera/4" in navigator.userAgent, voor Opera 5 op "Opera 5" of "Opera/5" en voor Opera 6 op "Opera 6" of "Opera/6".

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!-- test Opera 6
if ((navigator.userAgent.indexOf("Opera 6") != -1) || (navigator.userAgent.indexOf("Opera/6") != -1)) {
document.write("ja");
}
else {
document.write("nee");
}
//-->
</SCRIPT>

Document openen afhankelijk van browser

De browsertest kun je bijvoorbeeld gebruiken om te bepalen welk document geopend moet worden. Dat kan dan een document zijn, wat speciaal is toegesneden op de mogelijkheden van de betreffende browser. In het volgende voorbeeld wordt slechts de naam van de browser vermeld, maar meer voor de hand liggende mogelijkheden zijn bijvoorbeeld het afhankelijk van de browser gebruiken van style sheets en inline frames.

Probeer dit voorbeeld in een nieuw venster.

In de head van het document, dat geopend wordt in het nieuwe venster, staat een script waarin achtereenvolgens getest wordt of het gaat om een bepaalde versie van Microsoft Internet Explorer, Mozilla, Netscape Navigator, of Opera. Een klein deel van het script wordt hierna weergegeven. het volledige script kun je in een nieuw venster bekijken.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
function browsertest()
{
if (navigator.userAgent.indexOf("MSIE 3") != -1) {
window.location.href="js-br1ea.htm";
}
else
if (navigator.userAgent.indexOf("MSIE 4") != -1) {
window.location.href="js-br1eb.htm";
}
else
.....
}
//-->
</SCRIPT>

Zorg er weer voor dat de code tussen de haakjes achter de if-statements niet onderbroken wordt door een harde overgang naar de volgende regel.

Het BODY element van het document in het nieuwe venster, is als volgt opgebouwd:

<BODY onload="browsertest();">
...
</BODY>

Algemeen script voor browsertest

Wanneer je vaker in een document gebruik maakt van een browsertest, dan is het wellicht handig om het volgende script als eerste in de head van het document te plaatsen:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

var M2   = (navigator.userAgent.indexOf("Mozilla/2") != -1);
var M3   = (navigator.userAgent.indexOf("Mozilla/3") != -1);
var M4   = (navigator.userAgent.indexOf("Mozilla/4") != -1);
var M5   = (navigator.userAgent.indexOf("Mozilla/5") != -1);

var OP   = (navigator.userAgent.indexOf("Opera") != -1);
var OP3  = (navigator.userAgent.indexOf("Opera/3") != -1) && M3;
var OP35 = (navigator.userAgent.indexOf("Opera/3") != -1) && M4;
var OP36 = (navigator.userAgent.indexOf("Opera 3") != -1) && M4;
var OP4  = (navigator.userAgent.indexOf("Opera 4") != -1) ||
           (navigator.userAgent.indexOf("Opera/4") != -1);
var OP5  = (navigator.userAgent.indexOf("Opera 5") != -1) ||
           (navigator.userAgent.indexOf("Opera/5") != -1);
var OP6  = (navigator.userAgent.indexOf("Opera 6") != -1) ||
           (navigator.userAgent.indexOf("Opera/6") != -1);

var IE   = (navigator.userAgent.indexOf("MSIE") != -1) && !OP;
var IE3  = (navigator.userAgent.indexOf("MSIE 3") != -1);
var IE4  = (navigator.userAgent.indexOf("MSIE 4") != -1);
var IE50 = (navigator.userAgent.indexOf("MSIE 5.0") != -1) && !OP;
var IE55 = (navigator.userAgent.indexOf("MSIE 5.5") != -1) && !OP;
var IE60 = (navigator.userAgent.indexOf("MSIE 6.0") != -1) && !OP;

var NN   = (navigator.appName == "Netscape") && !OP;
var NN2  = (navigator.appName == "Netscape") && M2 && !OP;
var NN3  = (navigator.appName == "Netscape") && M3 && !OP;
var NN4  = (navigator.appName == "Netscape") && M4 && !OP;
var NN6  = (navigator.userAgent.indexOf("Netscape6") != -1)
           && M5; && !OP;
var NN7  = (navigator.userAgent.indexOf("Netscape/7") != -1)
           && M5; && !OP;

var MOZ1 = M5; && (navigator.userAgent.indexOf("Netscape") == -1) &&
           !OP; && (navigator.userAgent.indexOf("Gecko") != -1) &&
           (navigator.userAgent.indexOf("rv:1") != -1)

//-->
</SCRIPT>

Omdat bovenstaande code geen onderdeel is van een functie, kunnen de verschillende variabelen (zoals OP35, NN4 en IE50) direct in andere scripts in hetzelfde document gebruikt worden, zonder de testen opnieuw te hoeven uitvoeren. Een volgend script kan er daardoor bijvoorbeeld als volgt uitzien:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
if (OP35) {
alert("De gebruikte browser is Opera 3.5");
}
//-->
</SCRIPT>

Aan het algemene browser script kun je ook nog code toevoegen om te testen of het versienummer van de browser groter of gelijk is aan een bepaald getal. In de volgende code gebeurt dat voor Microsoft Internet Explorer 4 en hoger en Netscape Navigator 3 en hoger.

var IE4plus = IE && (parseInt(navigator.appVersion) >= 4);
var NN3plus = NN && (parseInt(navigator.appVersion) >= 3);

Tenslotte is het soms handig om de werking van een script te laten afhangen van het platform (Windows, Linux, Macintosh) dat de bezoeker gebruikt, bijvoorbeeld wanneer je een style sheet gebruikt met daarin vaste puntgrootten gedefinieerd. Je kunt dan aan het algemene script een platformtest toevoegen. Hierna is dat gedaan voor Netscape Navigator 6.

var WIN = navigator.userAgent.indexOf("Win") != -1;
var MAC = navigator.userAgent.indexOf("Mac") != -1;
var LIN = navigator.userAgent.indexOf("Lin") != -1;

var NN6w  = NN6 && WIN;
var NN6m  = NN6 && MAC;
var NN6l  = NN6 && LIN;

var MOZ1l = MOZ1 && LIN;

Een voorbeeld van het gebruik van een algemeen script voor de browsertest, wordt gegeven bij de beschrijving van browser-specifieke stijlbladen.

  Inhoud Handleiding HTML   Overzicht JavaScript voorbeelden   Inhoud JS - Informatie over de browser

Laatste wijziging 23 juli 2002
Copyright © 1995-2002 Hans de Jong