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

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:
navigator.appName:
navigator.appVersion:
navigator.appCodeName:
navigator.userAgent:


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, Netscape Navigator en Opera.


Browsertest

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

Microsoft Internet Explorer 3:


Microsoft Internet Explorer 4:

Microsoft Internet Explorer 5.0:
Microsoft Internet Explorer 5.5:
Netscape Navigator 2:
Netscape Navigator 3:
Netscape Navigator 4:
Netscape Navigator 6 Preview Release 2:
Opera 3:
Opera 3.5:
Opera 3.6:
Opera 4.0:


Voor Microsoft Internet Explorer 3 en 4 is het voldoende te testen op de aanwezigheid van "MSIE 3", respectievelijk "MSIE 4" in navigator.userAgent.

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

Voor Microsoft Internet Explorer 5.0 en 5.5 test je in navigator.userAgent op "MSIE 5.0", respectievelijk "MSIE 5.5". Omdat Opera 4 ook gebruik kan maken van de tekst "MSIE" in navigator.userAgent, moet je hier een extra kenmerk 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.

Om te testen of het gaat om Netscape Navigator 2, moet gebruik gemaakt worden van twee kenmerken: de naam "Netscape" in navigator.appName en de tekst "Mozilla/2" in navigator.userAgent.

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

Omdat Opera 3 ook gebruikt maakt van de naam "Netscape" in navigator.appName en de tekst "Mozilla/3" in navigator.userAgent, moet voor Netscape Navigator 3 nog een derde kenmerk opgenomen worden: in navigator.userAgent mag de tekst "Opera" niet voor komen.
Voor Netscape Navigator 4 gebeurt het op een vergelijkbare wijze, alleen test je nu op "Mozilla/4".

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

Ook voor Netscape Navigator 6 Preview Release kun je dezelfde methode hanteren, alleen test je nu op de aanwezigheid van "Mozilla/5" in navigator.userAgent. Voor de definitieve versie van Netscape Navigator 6 kunnen nadere testcriteria nodig zijn.

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

Omdat voor zowel Opera 3 als 3.5 in navigator.userAgent "Opera/3.0" vermeld staat, moet je ook hier een extra test opnemen: voor Opera 3 test je op de aanwezigheid van "Mozilla/3", voor Opera 3.5 op die van "Mozilla/4".

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

Voor het gemak is in Opera 3.6 de waarde van navigator.userAgent gewijzigd. Er moet nu niet meer getest worden op "Opera/3.0", maar op "Opera 3".

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

In Opera 4 kan ingesteld als welke browser het programma geïdentificeerd moet worden. De waarde van navigator.userAgent heeft daardoor verschillende uitkomsten. Daarom moeten we testen op de aanwezigheid van de tekst "Opera 4" of de tekst "Opera/4" in navigator.userAgent:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!-- test Opera 4.0
if ((navigator.userAgent.indexOf("Opera 4") != -1) || (navigator.userAgent.indexOf("Opera/4") != -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 betreft het specifieke niet meer dan het vermelden van de naam van de browser, maar andere mogelijkheden zijn bijvoorbeeld het afhankelijk van de browser gebruiken 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 het volgende script:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
function browsertest()
{
if ((navigator.userAgent.indexOf("Mozilla/2") != -1) &&
(navigator.appName == "Netscape")) {
window.location.href="js-br1a.htm";
}
else
if ((navigator.userAgent.indexOf("Mozilla/3") != -1) &&
(navigator.appName == "Netscape") &&
(navigator.userAgent.indexOf("Opera") == -1)) {
window.location.href="js-br1b.htm";
}
else
if ((navigator.userAgent.indexOf("Mozilla/4") != -1) &&
(navigator.appName == "Netscape")) &&
(navigator.userAgent.indexOf("Opera") == -1)) {
window.location.href="js-br1c.htm";
}
else
if ((navigator.userAgent.indexOf("Mozilla/5") != -1) &&
(navigator.appName == "Mozilla")) == -1)) {
window.location.href="js-br1d.htm";
}
else
if (navigator.userAgent.indexOf("MSIE 3") != -1) {
window.location.href="js-br1e.htm";
}
else
if (navigator.userAgent.indexOf("MSIE 4") != -1) {
window.location.href="js-br1f.htm";
}
else
if ((navigator.userAgent.indexOf("MSIE 5.0") != -1) &&
(navigator.userAgent.indexOf("Opera") == -1)) {
window.location.href="js-br1g.htm";
}
else
if ((navigator.userAgent.indexOf("MSIE 5.5") != -1) &&
(navigator.userAgent.indexOf("Opera") == -1)) {
window.location.href="js-br1h.htm";
}
else
if ((navigator.userAgent.indexOf("Opera/3") != -1) &&
(navigator.userAgent.indexOf("Mozilla/3") != -1)) {
window.location.href="js-br1i.htm";
}
else
if ((navigator.userAgent.indexOf("Opera/3") != -1) &&
(navigator.userAgent.indexOf("Mozilla/4") != -1)) {
window.location.href="js-br1j.htm";
}
else
if ((navigator.userAgent.indexOf("Opera 3") != -1) &&
(navigator.userAgent.indexOf("Mozilla/4") != -1)) {
window.location.href="js-br1k.htm";
}
else
if ((navigator.userAgent.indexOf("Opera 4") != -1) ||
(navigator.userAgent.indexOf("Opera/4") != -1)) {
window.location.href="js-br1l.htm";
}
}
//-->
</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 MOZ2 = (navigator.userAgent.indexOf("Mozilla/2") != -1);
var MOZ3 = (navigator.userAgent.indexOf("Mozilla/3") != -1);
var MOZ4 = (navigator.userAgent.indexOf("Mozilla/4") != -1);
var MOZ5 = (navigator.userAgent.indexOf("Mozilla/5") != -1);

var OP   = (navigator.userAgent.indexOf("Opera") != -1);
var OP3  = (navigator.userAgent.indexOf("Opera/3") != -1) && MOZ3;
var OP35 = (navigator.userAgent.indexOf("Opera/3") != -1) && MOZ4;
var OP36 = (navigator.userAgent.indexOf("Opera 3") != -1) && MOZ4;
var OP4  = (navigator.userAgent.indexOf("Opera 4") != -1) ||
           (navigator.userAgent.indexOf("Opera/4") != -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;
var IE55 = navigator.userAgent.indexOf("MSIE 5.5") != -1;

var NN   = (navigator.appName == "Netscape") && !OP;
var NN2  = NN && MOZ2;
var NN3  = NN && MOZ3;
var NN4  = NN && MOZ4;
var NN6  = NN && MOZ5;

//-->
</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 Netscape Navigator 3 en hoger en Microsoft Internet Explorer 4 en hoger.

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

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.

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

var IE3w  = IE3 && WIN;
var IE4w  = IE4 && WIN;
var IE50w = IE50 && WIN;
var IE55w = IE55 && WIN;
var NN4w  = NN4 && WIN;
var NN6w  = NN6 && WIN;

var IE3m  = IE3 && MAC;
var IE4m  = IE4 && MAC;
var IE50m = IE50 && MAC;
var IE55m = IE55 && MAC;
var NN4m  = NN4 && MAC;
var NN6m  = NN6 && MAC;

var NN4l  = NN4 && LIN;
var NN6l  = NN6 && LIN;

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

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


De gebruikte style sheets voldoen aan CSS 2 Dit document voldoet aan HTML 4.01 Laatste wijziging 23 september 2000
Copyright © 1995-2000 Hans de Jong