PDA

View Full Version : Browser Version detection and redirection



eday_2010
12-03-2006, 11:39 PM
After googling endlessly and searching these forums, I have not found what I am loking for.

Basically, I need a browser detection script that will detect what version of what browser the user is reading. My site works with IE 5.5SP2 and up, Netscape 7.2 and up, Opera 7.1 and up, and Firefox 1.0 and up (have not tested on any Mac browsers.

What I want the script to do is once it's detected a version ofone of these browsers or higher, to continue loading the page. If it detects a lower version, or any other browser, I want it to direct users to a page telling them they are using an old or untested browser, where I have links to update the tested browsers and a link to continue to the site anyways

One script I found isn't working, and I don't know Javascript. Can anyone help? The one I found causes a runtime error in IE 6 for Windows 2000 and doesn't do what it's supposed to. And, how do I specify that IE 5.5 has to be SP2?


<script type="text/javascript">
<!--
browserName=navigator.appName;
browserVer=parseInt(navigator.appVersion);
if ((browserName=="Netscape" && browserVer>=7.2) || (browserName=="Microsoft Internet Explorer" && browserVer>=5.5) || (browserName=="Opera" && browserVer>=7.1) || (browserName=="Mozilla Firefox" && browserVer>=1))
version="vernew";
else
version="other";
/* Newer browser URL */
if (version=="vernew")
window.location="http://www.wnstudios.ca";
/* Other browsers URL */
else
window.location="http://www.wnstudios.ca/old.html";
//-->
</script>

jscheuer1
12-05-2006, 05:50 AM
From QuirksMode.org:

Do not use this script. Newbies often overrate the importance of a browser detect. Read the Object detection page first.
Almost any script that uses a browser detect is incorrect.

That said, the script there is much better at it:

http://www.quirksmode.org/js/detect.html

eday_2010
12-05-2006, 02:01 PM
Which script? The one they said NOT to use?

So if I am supposed to use object detection, how am I supposed to know which objects I am supposed to have the script detect? I don't know Javascript and don't know all the intricicies of browsers and what exactly they mess up when rendering my site. My site is XHTML Transitional, and uses PHP includes, CSS, and Javascript, mainly the Ultimate Fade-in slideshow from this site.

So what exactly I am supposed to tell the detection script to look for?

jscheuer1
12-05-2006, 02:48 PM
In all likelihood XHTML is not required. In any case it certainly is a questionable choice as, many browsers still do not support it. So, having it as your DOCTYPE will throw them into quirks rendering, the least cross browser level of page rendering. A valid strict or transitional HTML DOCTYPE should be used wherever possible with HTML 4.01 Strict being the preferred one, if applicable, as most browsers will render it in a similar fashion.

The Ultimate Fade-in slideshow already performs extensive object detection. That is why it is so cross browser friendly.

Object detection is not for page redirection. It is for branching within a script. In most basic terms, it is a method used in writing scripts which first asks the browser if it can do a thing before requesting that it do so. If the browser cannot, a different method is posited, and so on until either the script finds a method that suits the browser or runs out of choices. If the choices become exhausted, a simpler method from the very beginnings of javascript is used, or the effect in question is skipped.

For more on object detection see:

http://www.quirksmode.org/js/support.html

eday_2010
12-05-2006, 03:46 PM
I have read that page before, and it's all fine and dandy, but it doesn't help me. I don't know how to write JavaScript. All I was looking for was something to direct everything but the browsers I specified to a different page. Example:


browser = navigator.appName
ver = navigator.appVersion
version = ver.substring(0,1)
if (browser=="Internet Explorer") {
if (version<="5.5")
document.location.href="index2.html"
}
if (browser=="Netscape") {
if (version<="7.2")
document.location.href="index2.html"
}
if (browser=="Firefox") {
if (version<="1.0")
document.location.href="index2.html"
}
if (browser=="Opera") {
if (version<="7.1")
document.location.href="index2.html"
}

This works just fine for me, except I need something else that says "If the browser is anything but IE 5.5 SP2, Netscape 7.2, Firefox 1.0, or Opera 7.1, send it to thispage.html".

Yes, yes, I know, "Don't use browser detection", etc etc. However, I WANT to use it. It's simple for me to change since I don't know Javascript, and it seems to work with the 2 browsers I am testing it on (IE 6 and NS 4.79).

So is there any way to have the script do what I want, keeping in mind that I don't want to deal with object detection at the moment? I want this to work first so Ihave something while I figure out a better way of doing it. Thanks :)

jscheuer1
12-05-2006, 05:12 PM
Assuming that your above code works, simply appending a redirect for the fall back page would do it. You see, if the browser fulfills any of the the criteria established by your tests, it will be redirected to index2.html. Otherwise, it will find its way to the bottom of that code segment where you can put this:


document.location.href="someother.html"

Alternatively, if the redirect script is on the page that you want all other browsers to use, simply having nothing at the end of those tests will allow all other browsers to remain on that page. This is actually preferable as, then even non-javascript enabled browsers will have something t look at.

Twey
12-05-2006, 06:13 PM
I want this to work first so Ihave something while I figure out a better way of doing it.Instead, try not using browser-specific features until you figure out a better way of doing it.
A valid strict or transitional HTML DOCTYPE should be used wherever possibleFrom a purely pragmatic point of view, a Transitional HTML DOCTYPE is just as bad (or worse) than an XHTML one. A Strict XHTML DOCTYPE will tend to throw browsers into Standards mode, even those that don't support it; however, since the HTML is malformed, they may behave unpredictably. HTML Transitional will cause all of today's common browsers to go into Quirks.

eday_2010
12-05-2006, 08:07 PM
Just for the record, my site is coded in XHTML 1.0 Transitional.

As for the
document.location.href="someother.html"

When I include that line, alone or in an else clause, it redirects everything to that specified page, even if the browser is up to date. MAybe the script should be the other way around and say "if x-browser is version y.z or higher, load the page, otherwise go to index2.html"

How would that be done? Simply changing the < to a > will make the browser run through the script endlessly.

jscheuer1
12-06-2006, 06:11 AM
Just for the record, my site is coded in XHTML 1.0 Transitional.

Probably not a good idea.

Your other problem, with the redirect, is probably due to a faulty script to begin with. Try DD's:

http://www.dynamicdrive.com/dynamicindex9/bredirect.htm

jscheuer1
12-06-2006, 06:22 AM
A Strict XHTML DOCTYPE will tend to throw browsers into Standards mode, even those that don't support it

Like NS4? I don't understand this logic. I thought XHTML was to be avoided and that it threw non-supportive browsers into quirks - shows how much attention I've been paying to all of this.

I know views vary on this subject (the best DOCTYPE to use) and that is fine with me. I like the HTML 4.01 Transitional/loose:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

It appears to me to be about the same as strict (when it comes to rendering in the various browsers) while at the same time allowing for more tags and attributes than strict.

Take that with the fact that I have never been a crusader for strict adherence to any particular standards. They'll change and/or be ignored by some browsers. I do like valid code though so, go figure.

Twey
12-06-2006, 12:16 PM
It appears to me to be about the same as strict (when it comes to rendering in the various browsers) while at the same time allowing for more tags and attributes than strict.No, a Transitional DOCTYPE will throw a browser into Quirks mode: from a purely practical point of view, it might as well not be there. It's better than nothing, though, I suppose.
I thought XHTML was to be avoided and that it threw non-supportive browsers into quirks - shows how much attention I've been paying to all of this.Whether the page is rendered in Standards or Quirks depends entirely on the DOCTYPE, not any particular adherence to it. IE, as the best example, on seeing an XHTML Strict DOCTYPE, will attempt to parse the page in Standards mode. The problem is that since it doesn't support XHTML, it will attempt to parse the page as valid HTML, which, obviously, it isn't. This can lead to unpleasantness. I was recently corrected on this myself, so I may have been the one to lead you into that assumption. If so, I apologise.

eday_2010
12-06-2006, 03:14 PM
Probably not a good idea.

Your other problem, with the redirect, is probably due to a faulty script to begin with. Try DD's:

http://www.dynamicdrive.com/dynamicindex9/bredirect.htm

How do I use this script if the index page itself that I want the page to load holds this script? It just keeps reloading endlessly forever and ever. Or do I HAVE to use a bank page? And if i set IE to be 5.5 or higher, it sends IE 6 to the page for naughty browsers. Weird.

jscheuer1
12-06-2006, 03:59 PM
It depends upon which criteria you wish to have trigger the ordinary loading of the current page. The most applicable way would be to make these tests part of a function and then run it:


<script type="text/javascript">
function bredirect(){

//Browser redirect Script- Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and Terms Of Use,
//visit dynamicdrive.com

var browser_type=navigator.appName
var browser_version=parseInt(navigator.appVersion)

//if NS 6
if (browser_type=="Netscape"&&browser_version>=5)
window.location.replace("http://mozilla.org")
//if IE 4+
else if (browser_type=="Microsoft Internet Explorer"&&browser_version>=4)
window.location.replace("http://microsoft.com")
//if NS4+
else if (browser_type=="Netscape"&&browser_version>=4)
window.location.replace("http://www.netscape.com")
//Default goto page (NOT NS 4+ and NOT IE 4+)
else
window.location="http://www.dynamicdrive.com"

}

bredirect();
</script>

Once you have it set up like that, for any test that you wish to have ignore the rest of the tests and load the current page, simply put 'return;' in place of its current action/method, ex:


//if IE 4+
else if (browser_type=="Microsoft Internet Explorer"&&browser_version>=4)
return;

Now then, if you do not like the specific criteria for a given test, change them, ex:


//if IE 4+ but less than IE 6
else if (browser_type=="Microsoft Internet Explorer"&&browser_version>=4&&browser_version<6)
return;

Incidentally, the green part (and all parts of a script that begin with unquoted double upslashes (//) are comments to the end of the current line and have no effect on performance. Also, you can edit the result, so the above could be a window.location.replace() or window.location= instead of a return. It is up to you to make the script do the particular things that you want. As a rule of thumb, prior to v 4 of any browser, window.location.replace() is unavailable so, use 'window.location=' or 'return;' for any test that could catch a pre v 4 browser. The best way though is to use object detection (http://www.quirksmode.org/js/support.html) for this. To do that, put this function before our bredirect function:


function wreplace(url){
if (window.location.replace)
window.location.replace(url);
else
window.location=url;
}

With that in hand, you can then do somethings like so:


//if NS 6
if (browser_type=="Netscape"&&browser_version>=5)
wreplace("http://mozilla.org")

and the browser itself decides which way to do it. This is object detection in a nutshell.

jscheuer1
12-06-2006, 04:09 PM
No, a Transitional DOCTYPE will throw a browser into Quirks mode

This has not been my experience. There are definite differences between transitional and no DOCTYPE. These are close enough in most browsers to the differences between Quirks and standards mode to make x-browser coding a bit more manageable without the restrictions of a strict DOCTYPE.

Although my philosophy on this is a bit more pragmatic (especially in that I like to use the transitional DOCTYPE) many of the same considerations go into it as do the author's position expressed here:

http://www.quirksmode.org/about/quirksmode.html

The bottom line is ease and flexibility of design options coupled with the likelihood that the page will render with a reasonable amount of consistency across browsers.

Taking my pragmatism further, I will code in any or no DOCTYPE, if the situation seems to call for it or if the consequences are minimal.

eday_2010
12-06-2006, 05:59 PM
Holy crap, that works! All Hail jscheuer1!! It loads the page in IE 6 and redirects Netscape 4.7 to the other page. The only problem now is that if I put


else if (browser_type=="Microsoft Internet Explorer"&&browser_version>=5.5)
return;

or even version>=5 or 6, it sends IE 6 (Win 2000) to the other page, which it shouldn't. One problem done, one more to go while I look into object detection. While looking up object detection, I opened a page that detects your browser in a pop-up message, and gave me the following message:


You are using Microsoft Internet Explorer
It's version is 4.0 (compatible; MSIE 6.0; Windows NT 5.0)
The code name of this browser is 'Mozilla'
You're working on Win32

Maybe that explains why the browser gets sent to the other page unless I specify version >=4.

jscheuer1
12-06-2006, 06:12 PM
if I put


else if (browser_type=="Microsoft Internet Explorer"&&browser_version>=5.5)
return;

or even version>=5 or 6 sends IE 6 to the other page, which it shouldn't. One problem done, one more to go while I look into object detection.

It shouldn't unless there is something before that test that does so or some reason why IE 6 would skip that test. I'd need to see your page or at least the complete code of your script to tell.

eday_2010
12-06-2006, 06:25 PM
Here is the javascript code. I link it to my page as an external js file. Right now I am using simple html pages for testing on my computer.


function bredirect(){
var browser_type=navigator.appName
var browser_version=parseInt(navigator.appVersion)

//if NS 7.2+
if (browser_type=="Netscape"&&browser_version>=7.2)
return;
//if IE 4+
else if (browser_type=="Microsoft Internet Explorer"&&browser_version>=5.5)
return;
//if Firefox 1+
else if (browser_type=="Firefox"&&browser_version>=1)
return;
//if Opera 7.1+
else if (browser_type=="Opera"&&browser_version>=7.1)
return;
//Default goto page (NOT NS 4+ and NOT IE 4+)
else
window.location="index2.html"
}

bredirect();

I don't know if you caught this edit to my post, but it seems to be why IE 6 doesn't go where it should.


While looking up object detection, I opened a page that detects your browser in a pop-up message, and gave me the following message:


Quote:
You are using Microsoft Internet Explorer
It's version is 4.0 (compatible; MSIE 6.0; Windows NT 5.0)
The code name of this browser is 'Mozilla'
You're working on Win32

jscheuer1
12-06-2006, 09:25 PM
Hah, that must be it. In IE 7, navigator.appVersion yields this string on my PC:

4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 3.1)

If you were to parse that out, it could still work and hopefully not mess up other browsers. Try this:


var browser_version=parseInt(navigator.appVersion.replace(/^.*MSIE /, ''))

instead of:


var browser_version=parseInt(navigator.appVersion)

I tried it with Opera 9.01, FF 1.5.0.8 and IE 7 and it got the correct version integer. If you want to get the sub-versions like 5.5 you would need to use parseFloat:


var browser_version=parseFloat(navigator.appVersion.replace(/^.*MSIE /, ''))

But, that will only work if that information is included in the response to navigator.appVersion. It is in Opera, IE 7 has no sub-version and FF 1.5.0.8 reports it's navigator.appVersion as 5.

Twey
12-06-2006, 10:43 PM
Hahaha, IE7 still reports itself as Mozilla 4?

IE started doing that around version 5, I think, for roughly the same reason spoof as MSIE today (well, the common reasons. The less common (http://www.boingboing.net/2005/01/27/jailed_for_using_a_n.html), one would hope, don't appear so often). It's laughable that it's still trying to pretend it's a better browser.

jscheuer1
12-06-2006, 10:53 PM
less common (http://www.boingboing.net/2005/01/27/jailed_for_using_a_n.html)

Ghastly.

eday_2010
12-06-2006, 11:53 PM
I will give those lines a try tomorrow. Where do I stick that line of code? Does it replace one I already have?

And how do I go about finding out what "objects to detect fpr specific broswers versions? Eg. How do I find out what makes IE 5.5 SP2 different than IE 5.5? My site works with the former but not the latter.

jscheuer1
12-07-2006, 04:44 AM
I will give those lines a try tomorrow. Where do I stick that line of code? Does it replace one I already have?

That's what I said. Pick the one you want and substitute it for the existing one.


And how do I go about finding out what "objects to detect fpr specific broswers versions? Eg. How do I find out what makes IE 5.5 SP2 different than IE 5.5? My site works with the former but not the latter.

This is a very, very odd circumstance. So odd, in fact, that I have difficulty believing it but, I suppose, it is possible. SP2 (Service Pack 2) was just an update. Perhaps it added capabilities or subtly changed how they worked. What specifically doesn't work without it? The object responsible for that functionality would be the one to test for. This was about the time (IE 5.5 SP2) that IE got the ability to do partial opacity, perhaps that is at the heart of the matter. Is fading involved? Just what is the problem pre-SP2?

eday_2010
12-07-2006, 02:01 PM
Super! the
var browser_version=parseFloat(navigator.appVersion.replace(/^.*MSIE /, ''))

worked!

As for the question about 5.5 vs 5.5 SP2, it's true. My sitte doesn't work with 5.5 SP1 either. there is fading involved on my site since I use the Ultimate fade in Slideshow 1.5 from here. However, I cannot remember exactly what the issue on my site was with IE before 5.5 SP2. It could be a CSS thing. The way I did my site was the background images around the body of my site are called with PHP includes. The backgrounds are classes for whichever table they are in (I know: tables bad, Divs good. I am working on that too). They are done in a CSS file like this:


td.rightbg {
background-image: url(content/includes/layout/rightbg.jpg);
}

This causes layout problems for a lot of older browsers, so I don't know if that was an issue with 5.5. I think it was just the Ultimate Fade-in slideshow.

Anyone who wants to look at my site if they have older browsers can view it here (http://www.wnstudios.ca). Anyone who wants to check older IE browsers can go to http://browsers.evolt.org/?ie/32bit. That's how I tested to see which was the first version to render my site correctly.

jscheuer1
12-07-2006, 05:24 PM
Hmm, that doesn't give me much to go on, especially considering that I have no desire to install the full version of IE 5.5 SP1 or earlier. However, this browser variable appears to detect the service pack on MSIE browsers:

navigator.appMinorVersion

On my old machine running IE 6 SP2, it returns:

;SP2;

So you could do this:


else if (browser_type=="Microsoft Internet Explorer"&&browser_version>=5.5&&(browser_version>=6||(navigator.appMinorVersion&&navigator.appMinorVersion.toLowerCase().indexOf('sp2')>-1)))
return;

This should only catch IE 5.5 SP2 and above. But I cannot be sure without testing on an actual full install of IE 5.5 SP2 and one of IE 5.5 SP1 and one of IE 5.5 with no service pack.

It will however degrade well under adverse circumstances and default to allowing only IE 6 and above if IE 5.5 doesn't support navigator.appMinorVersion - more object detection.

eday_2010
12-07-2006, 05:51 PM
Actually, with a lot of the browsers on evolt, they run as a stand-alone and don't need to be installed. I will try that line of code when I get home to see if it distinguishes between IE 5.5SP2 and IE 5.5 :)

jscheuer1
12-07-2006, 06:15 PM
Stand alone versions report the navigator.appMinorVersion of the installed MSIE browser of the computer, not their own.

eday_2010
12-08-2006, 01:48 PM
Anyhow, the code works for what I want, as far as I can tell. Now, if anyone wants to explain how exactly to do object detection, that would be great :)

jscheuer1
12-08-2006, 07:07 PM
Now, if anyone wants to explain how exactly to do object detection, that would be great :)

I've been trying to include examples along the way in this thread. When we did this:



function wreplace(url){
if (window.location.replace)
window.location.replace(url);
else
window.location=url;
}

That was object detection. We were testing to see if the browser had a window.location.replace() object or not. If it does, the above code will use it to replace the current page with the url passed to the function as a parameter. If it doesn't have the replace() object, then the window.location= method is used to switch to the url. These are similar but the replace() object is superior for this type of operation as, it does not add the current page to the history stack (used by the back and forward buttons).

Object detection was used again here in this segment of an if test:



[if]navigator.appMinorVersion&&navigator.appMinorVersion.toLowerCase().indexOf('sp2')>-1

The red highlighted bit makes sure that the browser supports the appMinorVersion object before it asks the browser for its value.

In summary, object detection is a method of writing code that establishes first whether or not a method or object is available in the browser before using it for anything. Often it includes a branch to a fall back method, as in the first example but, it can just default to 'false', as in the second example, in which case, anything that depended upon its being 'true' and/or available is skipped.

Some of the problems with your pages may not be able to be solved using object detection because some of them appear to be backward compatibility issues related to what types of css style a particular browser supports. To resolve these issues on a case by case basis enabling you to write just one version of a page for all browsers requires either a redesign of the page or the use of hacks for the specific earlier browser(s) involved. Hacks should never be used for modern browsers* though, proper coding will make them look OK and hacks will probably become hard to maintain in future versions.



*Hacks to css in IE are still acceptable but, only by using alternate style via the IE conditional comment. This is because that browser has a history of not being and still, even in v 7 is not standards compliant. However, it is often possible to avoid this by using a little less advanced design or styling as, IE 7 now is more compliant than any of its predecessors were. Pages made this way (without any hacks or browser tests) will be much easier to maintain in the long run.

eday_2010
12-11-2006, 03:10 PM
The main problem I had with my layout when I orginally did it with Divs instead of tables was that if I got it looking perfect in IE, then it would be way off in Firefox/Netscape. And if it worked in Firefox/Netrscape, then there were gaps in the layout in IE. This was because the background images were set as backgrounds in CSS classes. So each div would have a class that had a specific background image. If I had made the divs just use an img tag, then it would have rendered more correctly. But I didn't want to do it this way.

I have been told a few times that the way to get it working is to do it so it renders correctly in Firefox, and then fix it so it also works in IE. I take it this means using hacks to get it working in IE. My site uses one IE "if" hack for the image galleries. I am a little relucant to try to use only divs again as I don't want to use IE hacks if I don't have to.

mwinter
12-11-2006, 05:42 PM
No, a Transitional DOCTYPE will throw a browser into Quirks mode

This has not been my experience.

That's because it's not entirely true. If the declaration omits the system identifier (the URI) then browsers that do DOCTYPE sniff will go into "Quirks" mode.




Hahaha, IE7 still reports itself as Mozilla 4?

IE started doing that around version 5, I think, for roughly the same reason [that some browsers] spoof as MSIE today ...

As far as I'm aware, it started earlier than that. Someone mentioned it once somewhere, but I think it was IE 3 or 4. As you say, it was to ensure that IE wasn't excluded from sites that were "designed" for Netscape.



I have been told a few times that the way to get it working is to do it so it renders correctly in Firefox, and then fix it so it also works in IE. I take it this means using hacks to get it working in IE.

Not necessarily, and much less so for IE 7. You can partially avoid hacks by using a separate style sheet included using Microsoft's conditional comments. The box model bugs were solved in IE 6 by putting the browser into "Standards" mode, but it may be necessary to hack IE 5.x.

Mike

jscheuer1
12-11-2006, 05:54 PM
I was taking my responses to threads in order and was wondering how I would go here. Mike (mwinter) has given you good advice in his post, especially that last bit directed at his quote of your post.

I would add:


Using margins and/or padding rather than absolute or relative positioning seems to yield better results across browsers as far as layout appearance goes.

Keeping positioning via absolute or relative to a minimum is a good idea for a layout intended to work well cross browser.

Try not to fall into the trap of having a design that is so dependant upon being 'pixel perfect' to look good. Many designs will look fine even if things vary a little from browser to browser.

The goal is not to have everything look identical in all browsers, just to have everything look OK in all browsers.