Include different JavaScript file depending on browser?

Question

I want to include a JavaScript file only if the browser is not IE. Is there any way to do this?

Answer 1

Update 2022:

Some options for you:

1. Have your server look at the User-Agent header and send different HTML to Internet Explorer vs. other browsers.

   Pros:

   • No client-side solution required.

   Cons:

   • Relying on User-Agent strings is notoriously error-prone, and they can be spoofed or entirely absent.

2. Sniff navigator.userAgent and either output a script tag or not depending on what you find.

   Pros:

   • No server-side requirement.

   Cons:

   • Same as #1: Relying on User-Agent strings is notoriously error-prone, and they can be spoofed or entirely absent.
   • Some people have an issue with outputting script tags from code, particularly via document.write, but depending on your use case document.write may be unavoidable (e.g., do you need the script there before some other script, etc.).

3. Sniff for something in the JavaScript runtime that only Internet Explorer has, and output a script tag or not based on what you find.

   Pros:

   • No server-side requirement.
   • No user-agent sniffing.

   Cons:

   • The issue some people have with dynamically adding script tags.

I'd probably look at #3. For instance, any even vaguely modern browser has the Symbol function. Internet Explorer does not. So:

if (typeof Symbol !== "undefined") {
    document.write("<script src='./your-non-ie-script.js'><\/script>");
    // Or if you prefer
    let script = document.createElement("script");
    script.src = "./your-non-ie-script.js";
    document.activeElement.parentNode.appendChild(script);
}

Symbol is just one example, IE lacks Reflect, Proxy, and a few others from ES2015 that everything else has now...

(Not sure why I didn't mention this in 2013!)

---

Update 2013: IE10+ don't support conditional comments anymore.

---

You can do it with IE's conditional comments, like so:

<![if !IE]>
<script src="your-non-IE-script.js" type="text/javascript"></script>
<![endif]>

Note that the above is processed by non-IE browsers because the conditional is not an HTML comment, but a processing instruction, so the bit in the middle is processed by non-IE browsers. IE sees the conditional and skips over the content because it understands the conditional means "Not you, move along."

If you want to do something only for IE, you use a form that's similar, but uses HTML comments instead (with the --) because that's the only way you can rely on other browsers ignoring the contents. IE knows to pay attention to them, even though they're comments. More on the link above.

Note that there's a page load speed implication on IE (not the other browsers) when you use conditional comments (they temporarily block download of other resources), more here: http://www.phpied.com/conditional-comments-block-downloads/