开发者

Include different JavaScript file depending on browser?

I want to include a JavaScript file only if the browser is n开发者_运维知识库ot IE. Is there any way to do this?


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/


You can use an IE conditional comment.

To get something that will show up in browsers other than IE, but not in IE, and which will still validate, you can use:

<!--[if !IE]>-->
  <script src="..."></script>
<!--<![endif]-->


First, a note: This isn't really a good practice. If possible, you should strive to design your website in a browser-agnostic way, so that it works consistently across all browsers without the need to maintain hacks and tricks for browser-specific problems.

But if you really want to do this, it's easiest to include a file only if the browser is IE:

<!--[if lt IE 7]>
<script type="text/javascript" src="global.js"></script>
<![endif]-->

(Includes the file only if the browser is IE6 or less.)

However, if you really want to do it the other way around, here are some of your options:

  1. Use server-side browser sniffing to process the browser before the page is drawn. That is, use a server-side language (Java, PHP, whatever) to determine what the browser is (usually through the user agent string) and then conditionally include your JS files that way. (For example, you can use PHP's get_browser function.)
  2. Use client-side browser sniffing to call another JS file if the browser is not IE. You can determine the browser using JavaScript itself, and then insert another JS file into the page if the browser is anything but IE. (For example, you can use jQuery's browser function.)
  3. T.J.'s answer provides a way of doing it with I.E.'s conditional comments as well.


It's lesser known than conditional comments, but I thought I'd mention that you can also use an IE feature called conditional compilation - see http://msdn.microsoft.com/en-us/library/7kx09ct1%28VS.80%29.aspx

This example comes from their docs:

/*@cc_on @*/
/*@if (@_jscript_version >= 5)
document.write("JScript Version 5.0 or better.<BR>");
@else @*/
document.write("You need a more recent script engine.<BR>");
/*@end @*/


You can do that totally different way [inserting something ONLY if IE] using Conditional Comments, maybe that would help you.

http://en.wikipedia.org/wiki/Conditional_comment


Yes, conditional scripts for IE is your answer:

<!--[if lt IE 7 ]>
  <script src="/js/my_ie_script.js"></script>
<![endif]-->


How about turning it around? If this is a possibility you can use IE's conditional comments: http://www.quirksmode.org/css/condcom.html

Otherwise you could sniff user-agents but this is considered 'bad practice'.


Here's an solution working in 2022

<html>
<head>
<script>

// Test if running in Internet Explorer or not
function isIE () {
    var myNav = navigator.userAgent.toLowerCase();
    return (myNav.indexOf('msie') != -1 || myNav.indexOf('trident') != -1) ? true : false;
}

if (isIE()) {
    var script = document.createElement('script');
    script.src = "https://unpkg.com/core-js-bundle@3.6.5/minified.js";
    document.head.appendChild(script);
}

</script>
</head>
<body>
</body>
</html>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜