JS Informatie over de browser

Handleiding HTML Overzicht JavaScript voorbeelden | Inhoud HTML | Inhoud CSS | Begin


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 Microsoft Internet Explorer, Mozilla, Firefox, Netscape Navigator en Opera.


Browsertest

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

Microsoft Internet Explorer 5.x:
Microsoft Internet Explorer 6.0:
Microsoft Internet Explorer 7.0:
Microsoft Internet Explorer 8.0:
Netscape Navigator 4:
Mozilla 1.x:
Firefox 1.x
Firefox 2.0
Firefox 3.x
Opera 8.x:
Opera 9.x:
Opera 10.x:


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

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
var browser = testcode;
document.write(browser ? "ja" : "nee");
//-->
</SCRIPT>

Eerst wordt voor de browser waarop je wilt testen in een variabele vastgelegd aan welke kenmerken deze moet voldoen. Vervolgens schrijft het script 'ja' als het om de betreffende browser gaat en 'nee' als dat niet het geval is.

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 6.0, 7.0 en 8.0 test je in navigator.userAgent op "MSIE 6.0", respectievelijk "MSIE 7.0" en "MSIE 8.0". Omdat Opera ook gebruik kan 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 6.0
var IE60 = (navigator.userAgent.indexOf("MSIE 6.0") != -1) &&
(navigator.userAgent.indexOf("Opera") == -1);
document.write(IE60 ? "ja" : "nee");
//-->
</SCRIPT>

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
var NN4 = (navigator.appName == "Netscape") &&
(navigator.userAgent.indexOf("Mozilla/4") != -1) &&
(navigator.userAgent.indexOf("Opera") == -1);
document.write(NN4 ? "ja" : "nee");
//-->
</SCRIPT>

Voor de browser Mozilla 1 moet in navigator.userAgent "Gecko" wel voorkomen, maar "Netscape" en "Firefox" juist niet.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!-- test Mozilla 1
var MOZ1 = (navigator.userAgent.indexOf("Gecko") != -1) &&
(navigator.userAgent.indexOf("Netscape") == -1) &&
(navigator.userAgent.indexOf("Firefox") == -1) &&
(navigator.userAgent.indexOf("rv:1") != -1);
document.write(MOZ1 ? "ja" : "nee");
//-->
</SCRIPT>

Voor Firefox x.y test je op de aanwezigheid van "Firefox/x.y" in navigator.userAgent, bijvoorbeeld "Firefox/2.0" of "Firefox/3.5".

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!-- test Firefox 2.0
var FF20 = (navigator.userAgent.indexOf("Firefox/2.0") != -1);
document.write(FF20 ? "ja" : "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 t/m 8 moeten we daarom testen op de aanwezigheid van de tekst "Opera x" of de tekst "Opera/x" in navigator.userAgent, waarbij 'x' het versienummer van de browser is.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!-- test Opera 8
var OP8 = (navigator.userAgent.indexOf("Opera 8") != -1) || (navigator.userAgent.indexOf("Opera/8") != -1);
document.write(OP8 ? "ja" : "nee");
//-->
</SCRIPT>

Omdat Opera 10 zich ook identificeert als "Opera 9.80" moet de test voor "Opera 9" uitgebreid worden.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!-- test Opera 9
var OP9 = ((navigator.userAgent.indexOf("Opera 9") != -1) || (navigator.userAgent.indexOf("Opera/9") != -1)) &&
(navigator.userAgent.indexOf("Presto") == -1);
document.write(OP9 ? "ja" : "nee");
//-->
</SCRIPT>

Voor Opera 10 moet je testen op de aanwezigheid van "Presto/2.2.15" (Presto is de lay-out engine van Opera) en "Opera 10".

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!-- test Opera 10
var OP10 = (navigator.userAgent.indexOf("Presto/2.2.15") != -1) || (navigator.userAgent.indexOf("Opera 10") != -1);
document.write(OP10 ? "ja" : "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 stylesheets 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, Firefox, 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="e3.html";
}
else
if (navigator.userAgent.indexOf("MSIE 4") != -1) {
window.location.href="e4.html";
}
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 nuA   = navigator.userAgent;

var M2    = (nuA.indexOf("Mozilla/2") != -1);
var M3    = (nuA.indexOf("Mozilla/3") != -1);
var M4    = (nuA.indexOf("Mozilla/4") != -1);

var OP    = (nuA.indexOf("Opera") != -1);
var OP3   = (nuA.indexOf("Opera/3") != -1) && M3;
var OP35  = (nuA.indexOf("Opera/3") != -1) && M4;
var OP36  = (nuA.indexOf("Opera 3") != -1) && M4;
var OP4   = (nuA.indexOf("Opera 4") != -1) ||
            (nuA.indexOf("Opera/4") != -1);
var OP5   = (nuA.indexOf("Opera 5") != -1) ||
            (nuA.indexOf("Opera/5") != -1);
var OP6   = (nuA.indexOf("Opera 6") != -1) ||
            (nuA.indexOf("Opera/6") != -1);
var OP7   = (nuA.indexOf("Opera 7") != -1) ||
            (nuA.indexOf("Opera/7") != -1);
var OP8   = (nuA.indexOf("Opera 8") != -1) ||
            (nuA.indexOf("Opera/8") != -1);
var OP9   = ((nuA.indexOf("Opera 9") != -1) ||
            (nuA.indexOf("Opera/9") != -1)) &&
            (nuA.indexOf("Presto") == -1);
var OP10  = (nuA.indexOf("Presto/2.2.15") != -1) ||
            (nuA.indexOf("Opera 10") != -1);

var IE    = (nuA.indexOf("MSIE") != -1) && !OP;
var IE3   = (nuA.indexOf("MSIE 3") != -1);
var IE4   = (nuA.indexOf("MSIE 4") != -1);
var IE50  = (nuA.indexOf("MSIE 5.0") != -1) && !OP;
var IE55  = (nuA.indexOf("MSIE 5.5") != -1) && !OP;
var IE60  = (nuA.indexOf("MSIE 6.0") != -1) && !OP;
var IE70  = (nuA.indexOf("MSIE 7.0") != -1) && !OP;
var IE80  = (nuA.indexOf("MSIE 8.0") != -1) && !OP;

var GECKO = (nuA.indexOf("Gecko") != -1);
var MOZ   = GECKO && (nuA.indexOf("Netscape") == -1) &&
            (nuA.indexOf("Firefox") == -1);
var MOZ1  = MOZ && (nuA.indexOf("rv:1") != -1);

var FF    = (nuA.indexOf("Firefox") != -1);
var FF10  = (nuA.indexOf("Firefox/1.0") != -1);
var FF15  = (nuA.indexOf("Firefox/1.5") != -1);
var FF20  = (nuA.indexOf("Firefox/2.0") != -1);
var FF30  = (nuA.indexOf("Firefox/3.0") != -1);
var FF35  = (nuA.indexOf("Firefox/3.5") != -1);
var FF36  = (nuA.indexOf("Firefox/3.6") != -1);

var NN    = (navigator.appName == "Netscape") && !OP && !MOZ;
var NN2   = NN && M2;
var NN3   = NN && M3;
var NN4   = NN && M4;
var NN6   = (nuA.indexOf("Netscape6") != -1);
var NN7   = (nuA.indexOf("Netscape/7") != -1);
var NN8   = (nuA.indexOf("Netscape/8") != -1);
var NN9   = (nuA.indexOf("Navigator/9") != -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">
<!--
function browseralert() {
if (IE) {
alert("Wel eens een andere browser dan Internet Explorer geprobeerd?");
}
else {
alert("Goed zo, jij kiest zelf je browser!");
}
}
//-->
</SCRIPT>

Je kunt dit script bijvoorbeeld automatisch laten activeren door aan het BODY element in een document het onload attribuut toe te voegen:

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

Hier wordt het script geactiveerd met behulp van een hyperlink. Aan het A element is daarvoor het onclick attribuut toegevoegd:

<P>Probeer dit <A HREF="js-voorbeeld.html" TARGET="voorbeeld" onclick="browseralert(); return false;">voorbeeld</A>.</P>

Probeer dit voorbeeld.


Aan het algemene browser script kun je ook nog code toevoegen om te testen of de browser minimaal een bepaald versienummer heeft.

Voor Microsoft Internet Explorer en Netscape Navigator t/m versie 4 is het versienummer af te leiden uit de waarde van navigator.appVersion. Voor Microsoft Internet Explorer 4 en hoger gebruik je voor de test de volgende code:

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

Wil je testen op Netscape Navigator 3 en hoger dan is de code:

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

Omdat Netscape Navigator 6 en hoger, Mozilla en Firefox gebruik maken van dezelfde lay-out engine Gecko, kun je voor deze browsers één test uitvoeren. Daarbij heb je twee kenmerken in navigator.userAgent tot je beschikking. Het eerste kenmerk is het versienummer van de Gecko engine en begint met "rv:". Dit versienummer komt overeen met het versienummer van Mozilla, maar wijkt af van de versienummers van Netscape Navigator en Firefox. Het tweede kenmerk is de datum waarop de gebruikte Gecko engine is uitgebracht, vastgelegd in het formaat jjjjmmdd. In de volgende weergave van navigator.userAgent is te zien, dat de genoemde kenmerken voor Netscape Navigator 7.1 en Mozilla 1.4 respectievelijk "rv:1.4" en "20030624" (24 juni 2003) zijn:

MOZ 1.4     Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.4) Gecko/20030624
NN 7.1     Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.4) Gecko/20030624 Netscape/7.1

We zullen hier de datum gebruiken om te testen om welke versie van de browser het gaat.

Het volgende script gebruik je als je wilt weten of het gaat om Mozilla 1.4 en hoger, Firefox, of Netscape Navigator 7.1 en hoger.

var GECKO         = (nuA.indexOf("Gecko") != -1);
var begingecko    = nuA.lastIndexOf("Gecko");
var geckodatum    = nuA.substring(begingecko + 6,begingecko + 14);
var MOZ14NN71plus = GECKO && (geckodatum >= 20030624)

Een overzicht van versies van de verschillende browsers en de versiedatum van de ervoor gebruikte Gecko lay-out engine, kun je in een nieuw venster bekijken.

Ook voor Opera kun je geen gebruik maken van navigator.appVersion om het versienummer te achterhalen. Het versienummer staat nu echter opgenomen in navigator.userAgent. Wanneer het alleen gaat om het hoofdversienummer (bijvoorbeeld versie 4 of hoger), kun je het volgende script gebruiken.

var beginopera     = (nuA).lastIndexOf("Opera");
var operahfdversie = (nuA).substring(beginopera + 6,beginopera + 7);
var OP4plus        = OP && (parseInt(operahfdversie) >= 4);

Wanneer ook de subversie van belang is (bijvoorbeeld versie 7.2 of hoger), moet je een wat uitgebreider script gebruiken. In de uiteindelijke test laat je de punt tussen hoofd- en subversienummer weg.

var beginopera     = (nuA).lastIndexOf("Opera");
var operahfdversie = (nuA).substring(beginopera + 6,beginopera + 7);
var operasubversie = (nuA).substring(beginopera + 8,beginopera + 9);
var operaversie    = (operahfdversie + operasubversie);
var OP72plus       = OP && (parseInt(operaversie) >= 72);


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 puntgroottes gedefinieerd. Je kunt dan aan het algemene script een platformtest toevoegen. Hierna is dat gedaan voor Firefox 1.5.

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

var FF15w  = FF15 && WIN;
var FF15m  = FF15 && MAC;
var FF15l  = FF15 && LIN;

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


Inhoud onderdeel | Overzicht JavaScript voorbeelden | Inhoud HTML | Inhoud CSS | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 16 december 2017