Today I was updating some Javascript code to support the rapidly-approaching Internet Explorer 7. There were a few places in the code where there were IE-specific workarounds, which happily are no longer needed in IE 7
thanks to its improved standards support. Yay position:fixed!
Where the code used to check for if (ie) { ... }, now I wanted it to check for if (ie6OrLower) { ... }. So how to you tell the difference between IE 6 and IE 7+? You could parse the user-agent string, but I’d rather detect changes in the javascript object model. Here’s what I came up with:
if (typeof document.body.style.maxHeight != "undefined") {
// IE 7, mozilla, safari, opera 9
} else {
// IE6, older browsers
}
This distinguishes between browsers based on the fact that IE 7 knows about the maxHeight css property, whereas previous versions of IE didn’t. Does that seem like a sane approach to you?
Update: over at Ajaxian Arjan points out that it’s a bit simpler to check for window.XmlHttpRequest, which is also new in IE 7.
Ultimately, conditional comments are the best way. No user agent spoofing, no confusion with other browsers.
It’s just a pain to have conditional comments for three or four browser versions ;-)
[...] He didn’t want to grok the user agent, as that is very brittle, so he came up with: PLAIN TEXT JAVASCRIPT: [...]
Hey Mark,
I agree that conditional comments are useful, but they only work in markup. In this case I needed to be able to detect IE 6 and below in javascript, so I could run some special workaround logic.
I suppose if all I wanted to do was change the style of some elements for older versions of IE, it might be possible to use javascript to inject a conditional comment into the current page (has anybody tried that?). But in my case I was doing more then adding styles.
Not quite, what I meant was running some in-page JavaScript to set a variable which identifies the browser version.
[...] IE7 快將推出，而預計微軟也會用 Windows Update 要用戶更新，這樣對於 AJAX 的程式來說，偵測 IE7 及 IE6 就十分重要。在 Abe Fettig’s Weblog 看到可以用這段 Javascript 代碼完成: [...]
Mark – you mean this kind of conditional comment? Do you know the value of @_jscript_version for IE 7?
No, what Scott Schiller mentioned in the Ajaxian thread,
<!–[if IE 7]>.The new JScript is 5.7.
[...] Via Ajaxian, descubro un simple script en Javascript con el cual podremos diferenciar entre navegadores modernos y navegadores antiguos, muy util a la hora de hacer un poco de cross-browsing. [...]
[...] Abe Fettig’s Weblog » Detecting IE7+ in Javascript [...]
[...] Abe Fettig’s Weblog » Detecting IE7+ in Javascript (tags: Tech WebDev Browser JavaScript) [...]
[...] Abe Fettig’s Weblog » Detecting IE7+ in Javascript 如何辨識 IE7 的 JavaScript 語法～ [...]
Acutally there is conditional comments for JavaScript called Conditional Compilation. I would much rather use straight up JavaScript to test for the features but the nice thing about Conditional Compilation is that you can detect to the exact browser version for IE. I think it’s a bit sloppy and that JavaScript feature sniffing is a more streamline approach but it sure does help to have that one more tool in your belt.
really quick… if I only want something to show for IE 7 and I’m sniffing for features how would I nail it down to just IE 7. Would I test this:
if(window.XMLHttpRequest)
{
if(window.ActiveXObject)
{
// IE 7
}
else
{
// Opera, Safari, Firefox
}
}
else
{
//IE 6 and below
}
Here’s the link for the conditional compilation:
http://www.javascriptkit.com/javatutors/conditionalcompile.shtml
Cheers!
- Tony
actually, since IE7 ups the jscript version to 5.7 now, you can actually detect the specific engine version using condition compliation and the @_jscript_version flag. that is sure-fire detection for IE7, since jscript 5.7 is not available to older versions of IE.
Actually tom I think I read somewhere that Microsoft released an update for IE6 to bring it up to jscript version 5.7 so this detection won’t work! Typical Microsoft! (throws hands up in despair)
This approach is problematic in that it accesses document.body which isn’t available in the head section.
What I use today is something like this:
var md = window.showModelessDialog; /* Win 5+, WinCE 5.5+ */
var ns = document.namespaces; /* Win 5.5+, WinCE 5.5+ */
var im = document.implementation; /* Win 6, Mozilla */
var isIE = typeof window.external != ‘unknown’ && (md || ns || im);
var isIE50 = md && !ns && !im;
var isIE55 = md && ns && !im;
var isIE60 = md && ns && im;
So maybe I would check for IE 7 with
var isIE7 = md && ns && im && window.ActiveXObject;