在js中检测浏览器的最佳方法

发布于 2024-12-08 15:26:53 字数 143 浏览 0 评论 0 原文

JavaScript 中有很多浏览器检测方法。

据我所知，使用 navigator.userAgent 或检测功能（如 XMLHttpRequest）等。

谁能告诉我哪种方法最好、最有效？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

岁月如刀 2024-12-15 15:26:53

如果您确实需要知道他们正在使用什么浏览器，您通常必须查看userAgent字符串（尽管有时您可以推断出浏览器通过寻找一些晦涩的功能）。请注意，某些浏览器允许用户更改该设置并对您撒谎。 :-)

但是检测浏览器已经过时了，这是有充分理由的。相反，正如您所说，您想要检测您正在寻找的功能。这样更可靠，工作量也更少。例如，仅仅因为 IE 不支持 addEventListener，并不意味着它永远不会支持（事实上 IE9 也支持）。因此，您可以进行功能检测，从而使代码面向未来。

这是一个具体的例子：假设您想知道（就像我为我的 place5 jQuery 插件) 浏览器是否支持 占位符属性。您可以使用浏览器检测并维护一个列表，其中列出哪些版本的浏览器支持或不支持，这很混乱，您必须不断返回，等等，或者你可以这样做：

if ("placeholder" in document.createElement("input")) {
    // The browser supports the attribute
}
else {
    // It doesn't
}

...你就完成了。

此页面中有一组很棒的功能测试，由 kangax。还有一个名为 Modernizr 的库，可以为您执行功能检测、媒体查询等操作。如果您使用 jQuery，它会通过 jQuery.support 内置一些功能检测。这篇文章。

If you really need to know what browser they're using, you mostly have to look at the userAgent string (although you can sometimes infer the browser by looking for a couple of obscure features). Just be aware that some browsers let the user change that and lie to you. :-)

But detecting the browser is out of fashion, for good reasons. Instead, as you say, you want to detect the features you're looking for. This is more reliable, and less work. Just because IE didn't support addEventListener, for instance, doesn't mean it never will (and in fact IE9 does). So you feature-detect instead, which future-proofs the code.

Here's a concrete example: Suppose you want to know (as I did for my place5 jQuery plug-in) whether a browser supports the placeholder attribute. You could use browser detection and maintain a list of which browsers in which versions have or don't have support, which is messy and something you have to keep coming back to, etc., etc., or you could do this:

if ("placeholder" in document.createElement("input")) {
    // The browser supports the attribute
}
else {
    // It doesn't
}

...and you're done.

There's a great set of feature tests in this page maintained by kangax. There's also a library called Modernizr that does feature detection, media queries, and more for you. If you use jQuery, it has some feature detection built in via jQuery.support. There's a nice discussion of various aspects of feature detection, media queries, form-factor detection (tablet, phone, or PC?) in this article.