Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 727
John Assymptoth Avatar asked Sep 21 '12 18:09

John Assymptoth


People also ask

Can JavaScript work outside a browser?

Today, JavaScript can execute not only in the browser, but also on the server, or actually on any device that has a special program called the JavaScript engine. The browser has an embedded engine sometimes called a “JavaScript virtual machine”.

How do you write a conditional statement in JavaScript?

In JavaScript we have the following conditional statements: Use if to specify a block of code to be executed, if a specified condition is true. Use else to specify a block of code to be executed, if the same condition is false. Use else if to specify a new condition to test, if the first condition is false.

How do you create a conditional statement in HTML?

How to Build HTML for Conditional Links. Like we learned in the above example, conditional statements are best used outside your the Insert Link html elements. You will want to define your primary condition, then build the content to display after. Use {% else %} for your fallback content, and end with {% endif %}.


1 Answers

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;
  }
}
like image 178
jfriend00 Avatar answered Oct 12 '22 07:10

jfriend00