Thursday, September 17, 2009

Directing Browser Redirection

I thought for my first article, I would write something helpful, useful and not easily available to find on the internet. While designing a website for KMH Kreations and I decided to use an Accordion Spry Widget on their Services page. I found that the widget drastically reduced the page length, keeping the end user from having to scroll through a long list of information.

So I built the widget, and clicked the “compatibility view” button located next to the URL bar in Internet Explorer 8, which was set to IE7 mode. The CSS elements that were supposed to remain hidden until called upon were visible, turning my spry into an overlapping mess. The technology was too new to display properly in a browser that was any older than the new versions available.

In the end I created an old style scrolling page called services.php, and named my widget page kmhkservices.php. All I needed was a redirect script to point new browsers to the user-friendly widget page, but to ignore older browsers and display services.php.

Seems easy right? I searched the internet trying to find a script that included all of the top 4 browsers (Internet Explorer, Mozilla Firefox, Safari, Opera), that would allow me to set the version, and would allow me to point each browser to its own compatible page if need be.

I bounced from forum to forum, then from blog to blog, and found a few sites that had scripts that could detect and redirect Internet Explorer, a few that could do the same with Firefox, but there wasn’t a master script around that would cover the top four browsers in one master include. Also, everybody was posting comments and displaying their scripts asking why they could not get their scripts to work for Opera.

After several hours of searching, I decided that if there was not a master script out there, that it was up to me to create a master script for the world to use.


Creating a Browser Detection & Redirection Script

For this example, I am going to call the Javascript include file detect.js. The file should reside in the same folder as the webpage it is included in, which I am going to call oldbrowser.php.

In the <head> tag of the page you want to do the directing, include this code:

<script type="text/javascript" src="detect.js"></script>
 
This code will point to the detect.js include file.

Now here is the code that is in the detect.js include.

// JavaScript Document

<!--

if(navigator.userAgent.indexOf("Firefox") > 2)
{
window.location = "newbrowser.php";
}
else if(navigator.userAgent.indexOf("MSIE") > 7)
{
window.location = "newbrowser.php";
}
else if(navigator.userAgent.indexOf("Safari") > 3)
{
window.location = "newbrowser.php";
}
else if ((navigator.appName == 'Opera') && (parseInt(navigator.appVersion) >= 9))
     { location.href="newbrowser.php"; }

//-->

If the browser version does not meet any of these conditions it will continue to load oldbrowser.php in which the .js include file is referenced.

As you can see, the Opera section of the code is different than the other browsers. I set the top three “else if” conditions to greater than (>) so that newer/future versions of these browsers will still be directed to newbrowser.php. The fourth “else if” condition is set to greater than or equal to (>=) to show that it will still work for that option. I hope this article helps people out in directing their pages. I sure wish I could have found this on the web and saved myself a lot of time, but at least this way the next person won’t have to.

Download a copy of detect.js

No comments:

Post a Comment