Redirect maken met JavaScript
Het doorsturen van bezoekers via een redirect wordt om verschillende redenen gedaan door webmasters. Vaak omdat een website of webpagina verhuisd is, maar soms wordt een bezoeker ook doorgestuurd omdat hij een bepaald soort browser gebruikt en er op de website een speciale pagina gemaakt is voor die browser.
In dit artikel lees je hoe je zo'n redirect kunt maken met JavaScript. Eerst behandel ik de meest eenvoudige redirect, daarna gaan we proberen om een bezoeker die een specifieke browser gebruikt door te sturen.
Een eenvoudige redirect
Als een site of een bepaalde webpagina verhuisd is naar een nieuw webadres dan kun je deze makkelijke redirect gebruiken:
<head>
<script language="JavaScript">
<!--
window.location="http://www.hetwebadres.nl/";
//-->
</script>
</head>
Zoals je ziet, plaats je de code in het head-gedeelte van de pagina. Als je dit script gebruikt dan zal de bezoeker direct bij het laden van de pagina doorgestuurd worden naar de nieuw locatie die je hebt ingevuld bij "http://www.hetwebadres.nl/".
Redirecten op basis van browsertype
Omdat internetters verschillende browsers gebruiken en iedere browser (vooral de oudere) haar eigenaardigheden heeft, is het soms nuttig om mensen die een bepaalde browser gebruiken door te sturen naar een pagina die speciaal op die browser afgestemd is. Ook dan kunnen we met JavaScript de browser van de bezoeker detecteren en de bezoeker via de redirect doorsturen naar de nieuwe pagina.
Stel we hebben een speciale pagina voor bezoekers met Internet Explorer, een andere pagina voor bezoekers met Netscape en een pagina voor mensen met een andere browser. Voor het detecteren en het redirecten naar de nieuwe pagina gebruiken we dan de volgende code:
<head>
<script language="JavaScript">
<!--
var browserNaam=navigator.appName;
if (browserNaam=="Netscape")
{
window.location="http://www.hetwebadres.nl/netscape.html";
}
else
{
if (browserNaam=="Microsoft Internet Explorer")
{
window.location="http://www.hetwebadres.nl/ie.html";
}
else
{
window.location="http://www.hetwebadres.nl/overige.html";
}
}
//-->
</script>
</head>
Met behulp van het navigator.appName-object in de code hierboven wordt via JavaScript de naam van de browser teruggestuurd naar het script. Hierna wordt de rest van de code uitgevoerd op basis van dit resultaat. Bezoekers met Internet Explorer worden dus direct doorgestuurd naar http://www.hetwebadres.nl/ie.html , bezoekers met een Netscape browser naar http://www.hetwebadres.nl/netscape.html en bezoekers met weer een ander soort browser naar http://www.hetwebadres.nl/overige.html .
Naast het redirecten op grond van het soort browser van de bezoeker kunnen we bezoekers ook doorsturen op basis van de browserversie. Zo kunnen we bijvoorbeeld mensen die een oude browser (versie vier of lager) gebruiken doorsturen naar een speciale pagina. Hiervoor gebruik je deze code:
<head>
<script language="JavaScript">
<!--
var browserVersie=parseInt(navigator.appVersion);
if (browserVersie >= 5)
{
window.location="http://www.hetwebadres.nl/versie5+.html";
}
else
{
window.location="http://www.hetwebadres.nl/overig.html";
}
//-->
</script>
</head>
Nu wordt er via het navigator.appVersion-object het versienummer van de browser achterhaald. We gebruiken de parseInt-functie hierboven om het hele getal van de browserversie te krijgen. We zouden anders een decimaal getal terugkrijgen, omdat je meestal browserversies hebt als 4.17, 5.01, 7.11, etcetera.
Dus in het geval van een browser met versie 4.17 zal er nu gewoon 4 teruggestuurd worden. Het script wordt vervolgens verder uitgevoerd en deze bezoeker zal worden doorgestuurd naar http://www.hetwebadres.nl/overig.html .
Veel succes met het maken van je redirects!
Lees ook:
Homepage-Maken Tip
De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.
Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.