Tuesday, October 10th, 2006

Detecting IE7+ in JavaScript

Category: Browsers, JavaScript

<>p>Abe Fettig knows that we need to start detecting the difference between IE6- and IE7+, because a lot of the hacks that we were using for IE are no longer needed.

He didn’t want to grok the user agent, as that is very brittle, so he came up with:

javascript
< view plain text >
  1. if (typeof document.body.style.maxHeight != "undefined") {
  2.   // IE 7, mozilla, safari, opera 9
  3. } else {
  4.   // IE6, older browsers
  5. }

Any other thoughts?

Related Content:

Posted by Dion Almaer at 8:47 am
45 Comments

+++--
3.5 rating from 119 votes

45 Comments »

Comments feed TrackBack URI

You can also use the XHR check:


if (window.XMLHttpRequest) {
// IE 7, mozilla, safari, opera 9
} else {
// IE6, older browsers
}

Comment by Arjan — October 10, 2006

Yeah, how about using Conditional Compilation of JavaScript in IE

Comment by Ramin — October 10, 2006

@Arjan

You beat me too it, I was going to suggest that as well.

Comment by xxdesmus — October 10, 2006

Hey guys,
Arjan – I like checking for window.XmlHttpRequest – nice and short.
Ramin – conditional javascript compilation could be useful as well. Do you know the value of @_jscript_version in IE 7?

Comment by Abe Fettig — October 10, 2006

[...] 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. [...]

Pingback by Abe Fettig’s Weblog » Detecting IE7+ in Javascript — October 10, 2006

Conditional comments could also be used.

eg.

<!–[if IE 7]>
<script>isIE7 = true;</script>
<![endif]–>

.. Or something along those lines. See @MSDN.

Comment by Scott Schiller — October 10, 2006

If script is executed width , then document.body is not available yet.

if (window.XMLHttpRequest) {
if(document.epando){
//IE7
}else{
//mozilla, safari, opera 9…etc
}
} else {
// IE6, older browsers
}

Comment by Hedger Wang — October 10, 2006

[...] 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

version = parseFloat(navigator.appVersion.split(“MSIE”)[1]);
if ((version >= 5.5) && (version

Comment by Neftaly Hernandez — October 10, 2006

Yay for trunication, and the inability to preview/edit/delete comments.

version = parseFloat(navigator.appVersion.split(“MSIE”)[1]);
if ((version >= 5.5) && (version < 7) && (document.body.filters)) {

Comment by Neftaly Hernandez — October 10, 2006

it may be offtopic (not js) but in CSS, you can apply this rules:
#content {
margin:10; /*any browser*/
*margin:15; /*ie 6*/
_margin:20; /*ie 6 and 7*/

:)

Comment by Hector — October 10, 2006

Ajax Links – October 2006

Trackback by Scott Hanselman's Computer Zen — October 11, 2006

[...] [...]

Pingback by Intenta » Blog Archive » Detectar Internet Explorer 7 con Javascript — October 11, 2006

Seems to me that conditional comments as suggested by Scott Schiller are the correct approach as javascript implementation hacks such as:-

if (typeof document.body.style.maxHeight != “undefined”)

are brittle as we can’t predict future browser implementations. The IE team also recommended conditional comments in their interview in the latest Ajaxian podcast.

Comment by S Rimell — October 11, 2006

Quirksmode’s browser detect program worked fine and still works fine. But I like the first comment.

Comment by David — October 11, 2006

Internet Explorer 7 per JavaScript erkennen

Trackback by basimo.de — October 11, 2006

[...] Ajaxian: Detecting IE7+ in JavaScript A way to tell the difference between IE6 and IE7 in JavaScript, in case you have some IE hacks that aren’t necessary in version 7. [...]

Pingback by Filter for 12/10 2006 - Felt — October 12, 2006

[...] UPDATE (10/11/06): Thanks to Detecting IE7+ in Javascript from Ajaxian I’ve fixed it to work identically in IE7.  Though I still haven’t tested it on a PC :( [...]

Pingback by SteveCochrane.com » Blog Archive » Smooth Anchor Links — October 12, 2006

I think, the xmlHTTPRequest is not the good way to check is IE7. Why? Because there is an option on the “Internet Options/Advanced/Security” tab/section, where you can switch on/off the native xmlHTTPRequest support. I think, the ActiveX object will work if you switch it off.

Comment by Amon — October 12, 2006

Don’t use this to detect IE7. It is really bad to do object detection to determine the browser.

Microsoft did this for Atlas to detect Safari, but Safari fixed their bug/implemented the feature MS was checking for and it therefore used the Gecko path which obviously led to errors.

Using object detection is fine when you are using the object but it is bad to use it to detect the browser.

Comment by Erik Arvidsson — October 12, 2006

Scott Schiller pretty much has it right as far as doing it the right way (comment #6). Do the conditional comment check – that’s why it’s there for us.

Comment by Dustin Diaz — October 15, 2006

[...] On the topic of Google’s web apps, they have officially released Docs and Spreadsheets this week. So is it time to get rid of your Office apps and move to the world of web? I don’t know, I think I’d rather be in control of my data. Alan Graham is currently at the Office 2.0 conference in San Francisco and he’s shared his thoughts in his article an Intro to Office 2.0. His final thoughts echo those of others around the web, collaboration and connectivity should be the two top priorities for a successful Office 2.0 movement. It makes sense to me, which begs the question Is there a better way to interact with your web app? AJAX is the future of web application interface programming, well at least one future anyway. With IE7 coming out soon, Ajaxians world wide will need to start working on ways to differentiate between IE7 and IE6, here’s one method which has its flaws but does the job, sometimes, maybe. I’m sure a best practice will be sorted out soon, and hopefully the number of IE specific hacks can be removed from stylesheets making them more maintainable. And since I know most of you aren’t geeks like me, here’s some other interesting things from around the web. The Baader-Meinhof Phenomenon! Now that’s a mouthful. Ever felt like you that new thing you heard about keeps popping up more and more often in conversation and your own reading? Then you’re experiencing Baader-Meinhof, checkout the link for an explanation of why it happens. Think you would like to know Why we say no to free money? It’s neuro-economics, stupid. I always thought economics was a bit of a wishy washy subject once you got past the whole supply and demand micro-economics part of the “science”. Neuro-Economics might be the answer to why macro-economics (and it’s perfect world assumptions) falls apart so often. [...]

Pingback by garethtownsend.info » Blog Archive » The Monday Mashup - Links for the week ending the 15th of October 2006 — October 15, 2006

[...] Ajaxian » Detecting IE7+ in JavaScript (tags: msie js) [...]

Pingback by Garçon aka Martin Kopta » Blog Archive » links for 2006-10-22 — October 22, 2006

celle-ci fonctionne bien aussi

if (typeof document.documentElement.style.maxHeight != “undefined”) {
// IE 7, mozilla, safari, opera 9
} else {
// IE6, et versions antérieures
}

Comment by tomsjac — November 9, 2006

how to differentiate between the tabs in the same window using javascript…

Comment by Sreekanth — November 9, 2006

cheapest xenical online

buy xenical online | xenical review | xenical australia | cheapest xenical online | xenical scam xen001xenxen1

Trackback by cheapest xenical online — November 11, 2006

You could use conditional compilation… untested but should work…

isIE7 = false;
/*@cc_on
   @if (@_jscript_version == 7)
          isIE7 = true;
   @end
@*/

Comment by DannyB — November 15, 2006

I’ve been looking all over for something like this. A site I just launched: http://www.syndicate-cycle.com was written for IE7. Many of the customers that view the site are IE users. The page works but looks bad in IE6. I want IE6 and below users to see a warning page and then allow them to either upgrade or continue to the site. This code will probably work for me except it’s only a snippet and I don’t know how to program it fully to make it work. Can someone finish the code so I can implement it? THANKS!
sara

Comment by Sara — November 16, 2006

@DannyB:

I think the proper code is this:

isIE7 = false;
/* @cc_on
  @if (@_jscript_version >= 5.7)
    isIE7 = true;
  @end
@*/

Comment by Ben — November 27, 2006

I have tried:

isIE7 = true;

it did not work – everytime isIE7 was true even in IE6 :(

I tried:
isIE7 = false;
/* @cc_on
@if (@_jscript_version >= 5.7)
isIE7 = true;
@end
@*/

no good – does not work in IE7 :(.
The final solution is??!!!??

Comment by Lbordea — January 25, 2007

//If script is executed width , then document.body is not available yet.

if (window.XMLHttpRequest) {
if(document.all){
document.write(“IE 7″);
//IE7
}else{
document.write(“Mozilla”);
//mozilla, safari, opera 9…etc
}
} else {
document.write(“IE 6″);
// IE6, older browsers
}

This works perfectly as welll…

Comment by Abhilasha Sharma — January 29, 2007

the conditional compiling stopped working on me, it worked fine on my intranet server, but when I put it on the internet it stopped detecting properly (security zone setting?)

Comment by Jamie Pate — February 2, 2007

Btw, I settled with the obvious
var result = navigator.appVersion.indexOf(‘MSIE’) > -1;
(should be fine as long as no other browsers set their navigator.appVersion to contain ‘MSIE’ (why would they do that))

Comment by Jamie Pate — February 2, 2007

May be of some interest..?

http://www.java-scripts.net/javascripts/Knock-Knock!-Browser-Check.phtml

Comment by Max — February 21, 2007

If you are using a Javascript library, there’s a chance that the XMLHttpRequest object has been automatically added. I doubt Abe’s method would be added by a library so use that instead.

Comment by Will Kelly — March 9, 2007

Try this one:
var isIE7 = false;
/*@cc_on
@if (@_jscript_build >= 8832)
isIE7 = true;
@end
@*/

Comment by Stef — April 12, 2007

Not sure that last one is the way to go. My IE7 beta @_jscript_build is 5700 and my IE 6 is 8820. Really shouldn’t be branching code based on version anyways. Object detection (when you need to use the actual object, not as proposed in the examples here) is really the only way to be safe.

Comment by Shaun Inman — April 13, 2007

This always works for me:
version=0;
if(navigator.appName.indexOf(“Internet Explorer”) != -1)
{
temp=navigator.appVersion.split(“MSIE”);
version=parseFloat(temp[1]);
}
if (version == 0) //NON IE browser will return 0
{code}
if (version == 6)
{code}
etc.

Comment by Buddy Logan — April 20, 2007

var Browser=new(
var w=window;
var d=w.document;
var ua=navigator.userAgent.toLowerCase();
this.ie = w.VBArray;
this.ie5=(this.ie && (!d.createEventObject || !d.namespaces));
this.ie55=(this.ie && !d.implementation);
this.ie6=(this.ie && d.implementation);
this.ie7 = (this.ie && w.XMLHttpRequest);
this.opera = w.opera;
this.gecko = (w.netscape && !this. opera);
this.khtml=(ua.indexOf("safari")+1 || ua.indexOf("konqueror")+1);
)()

Comment by Valentin — October 2, 2007

var ie = /*@cc_on (@_jscript_version

Comment by Jim — November 27, 2007


var isIE7 = /*@cc_on@if(@_jscript_version>=5.7)!@end@*/false;

Comment by FredCK — December 8, 2007

The trouble with the JScript detection ideas is that the JScript version is independent of browser version.

Comment by Robin — December 17, 2007

@Robin: correct. Our final beast:

var isIE7 = /*@cc_on!@*/false && ( parseInt( s.match( /msie (\d+)/ )[1] ) >= 7 );

Comment by FredCK — January 2, 2008

In the above code:

var s = navigator.userAgent.toLowerCase();

Comment by FredCK — January 2, 2008

I’m using two javascript methods inside and html page and trying to run that page in IE7 but its is giving JavaScript syntax error. Can you help whts wrong here..?

function validateRow()
{
var desc=document.getElementById(“desc”);
var trimDesc=Trim(desc.value);
if((trimDesc==null) || (trimDesc==”))
{
alert(‘The RoutePlan must have a description’);
flag=false;
return flag;
}
return true;
}

function Trim(str)
{ while(str.charAt(0) == (” “) )
{ str = str.substring(1);
}
while(str.charAt(str.length-1) == ” ” )
{ str = str.substring(0,str.length-1);
}
return str;
}

Comment by anshulabhinav — September 17, 2008

Leave a comment

You must be logged in to post a comment.