CODEWITHSUNDEEP
javascripthtmlinternet-explorer
John Assymptoth
John Assymptoth

Reputation: 8507

How to make your Javascript run conditionally, depending on the browser?

I want a piece of Javascript to run if the browser is not IE or it is IE 9+. If the browser is IE8 or a lower version, another piece of Javascript should run.

I tried to use Conditional Comments:

<!--[if (!IE)|(gte IE 9)]>
    <script type="text/javascript"> /* code 1 */ </script>
<![endif]-->

<!--[if (lt IE 9)]>
    <script type="text/javascript"> /* code 2 */ </script>
<![endif]-->

But IE6 and IE7 still were executing code 1. And Firefox was executing code 2...

No jQuery, please.

Edit: Actually, my conditional expression was wrong. But still went with the feature detection proposed in the chosen answer.

Upvotes: 5

Views: 2652

Answers (3)

jfriend00
jfriend00

Reputation: 707218

From your comment, it sounds like you're just trying to decide if you can use document.getElementsByClassName(). If that's the case, you can use feature detection like this:

if (document.getElementsByClassName) {
    // code here that uses getElementsByClassName
} else {
    // code here that doesn't use getElementsByClassName
}

It may be cleaner to just install a polyfill so that you can use it in older versions of IE without having to check first. There are a number of them available you can find with a Google search. Here's one:

// Add a getElementsByClassName function if the browser doesn't have one
// Limitation: only works with one class name
// Copyright: Eike Send http://eike.se/nd
// License: MIT License

if (!document.getElementsByClassName) {
  document.getElementsByClassName = function(search) {
    var d = document, elements, pattern, i, results = [];
    if (d.querySelectorAll) { // IE8
      return d.querySelectorAll("." + search);
    }
    if (d.evaluate) { // IE6, IE7
      pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
      elements = d.evaluate(pattern, d, null, 0, null);
      while ((i = elements.iterateNext())) {
        results.push(i);
      }
    } else {
      elements = d.getElementsByTagName("*");
      pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
      for (i = 0; i < elements.length; i++) {
        if ( pattern.test(elements[i].className) ) {
          results.push(elements[i]);
        }
      }
    }
    return results;
  }
}

Upvotes: 5

Musa
Musa

Reputation: 97672

As jfriend00 states feature detection may be a better solution but here is the conditional comments that satisfy your requirements.

<!--[if gte IE 9]> -->
    <script type="text/javascript"> alert('ie9+ and not ie') </script>
<!-- <![endif]-->
<!--[if lt IE 9]>
    <script type="text/javascript"> alert(' < ie9') </script>
<![endif]-->

http://jsfiddle.net/szF4J/1/

Upvotes: 0

daolaf
daolaf

Reputation: 167

You can do this best by a check within javascript instead of one in HTML. In JS you have the property navigator.userAgent which returns a unique string for each browser (and even IE in its different compatibility versions). So I would suggest to execute the whole JS block in all browsers and simply add something like this add the top of it:

if(navigator.userAgent.indexOf('MSIE 9.0') !== -1)
{
  // call IE9 specific method
}
else
{
  // call method for other browsers
}

For a more sophisticated approach see this post navigator.userAgent

Upvotes: 0

Related Questions