Detecting IE7+ in Javascript
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 ;-)
Comment by Mark Wubben — October 10, 2006 @ 2:42 am
[...] He didn’t want to grok the user agent, as that is very brittle, so he came up with: PLAIN TEXT JAVASCRIPT: [...]
Pingback by Ajaxian » Detecting IE7+ in JavaScript — October 10, 2006 @ 8:48 am
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.
Comment by Abe — October 10, 2006 @ 9:11 am
Not quite, what I meant was running some in-page JavaScript to set a variable which identifies the browser version.
Comment by Mark Wubben — October 10, 2006 @ 9:54 am
[...] IE7 快將推出，而預計微軟也會用 Windows Update 要用戶更新，這樣對於 AJAX 的程式來說，偵測 IE7 及 IE6 就十分重要。在 Abe Fettig’s Weblog 看到可以用這段 Javascript 代碼完成: [...]
Pingback by Javascript 偵測 IE7 - Real-Blog — October 10, 2006 @ 9:59 am
Mark – you mean this kind of conditional comment? Do you know the value of @_jscript_version for IE 7?
Comment by Abe — October 10, 2006 @ 10:15 am
No, what Scott Schiller mentioned in the Ajaxian thread,
<!–[if IE 7]>.The new JScript is 5.7.
Comment by Mark Wubben — October 10, 2006 @ 12:27 pm
[...] 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. [...]
Pingback by Detectar IE7 mediante Javascript - aNieto2K — October 10, 2006 @ 1:18 pm
[...] Abe Fettig’s Weblog » Detecting IE7+ in Javascript [...]
Pingback by Lazycoder » once again, don’t check for specific browser types — October 11, 2006 @ 1:42 pm
[...] Abe Fettig’s Weblog » Detecting IE7+ in Javascript (tags: Tech WebDev Browser JavaScript) [...]
Pingback by -TMA-1- » links for 2006-10-12 — October 11, 2006 @ 7:23 pm
[...] Abe Fettig’s Weblog » Detecting IE7+ in Javascript 如何辨識 IE7 的 JavaScript 語法～ [...]
Pingback by ckm@NTHU - Blog » 每日網摘 (多日補齊) — October 15, 2006 @ 10:47 am
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
Comment by Tony Bianco — November 16, 2006 @ 6:42 pm
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.
Comment by tom — January 2, 2007 @ 9:14 pm
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)
Comment by Darren — October 22, 2007 @ 5:02 pm
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;
Comment by Johann — October 25, 2007 @ 6:03 am