Question

我正在开发一个需要检测正在使用的浏览器的页面（Chrome，Firefox，IE，Safari，Opera），并相应地设置一个标记值，例如1到5，我想用它来更改图像的来源标签（基本上我想根据当前使用的浏览器显示图标图像）。

我需要使用jQuery。我最初的选择是js，但我想这并不是一个非常可靠的选择，因为有些用户在浏览时关闭了脚本，并且可以在设置中修改浏览器的用户代理，例如Opera。如果我错了，请纠正我。

有人可以帮我解释一下代码吗？

编辑：我再次提出这个问题的原因是其他重复的问题是关于最佳实践以及使用$ .support vs $ .browser进行检测，但据我所知，$ .support仅检查不透明度支持。是否能够准确指出正在使用哪种浏览器？我显示相应徽标的任务非常具体，只需要检查浏览器名称（甚至不是版本）。我怎么能做到这一点？

Answer 1

$.browser有很多选项可以知道浏览器是什么。（在1.3 中弃用）

您可以将this plugin用于jquery版本1.9 +

Answer 2

注意，不考虑用户代理switching

/chrome|chromium|firefox|msie|opera/.exec(navigator.userAgent.toLowerCase()).toString().replace(/chrome|chromium/g, "-webkit-").replace(/firefox/g, "-moz-").replace(/msie/g, "-ms-").replace(/opera/g, "-o-")

以下js检查浏览器style属性是否实际支持已存在的style属性，或稍后动态插入。它主要由animations组成，但可以修改为在浏览器中测试任何css，style属性。如果props中已存在stylesheet，则vendor prefixes会插入stylesheet。如果稍后动态插入props，则还会插入vendor prefixes或将props附加到// prefix.1.1.min.js 2013, 2014 guest271314 // add css `prefixes` // TODO: `opera` compatibility; utilizes `-o-`, `-webkit-`, w3c (function prefix() { /* var el = $(selector).get(0), i.e.g, $("body").get(0), $("#animated").get(0) */ var prefixes = {"MozAnimation": "-moz-","webkitAnimation": "-webkit-" ,"msAnimation": "-ms-","oAnimation": "-o-"}; var props = ["animation", "backface-visibility", "border-radius" , "box-shadow", "transform", "transform-style", "transition"]; $.each(prefixes, function(key, val) { $("style") .attr({"data-prefix": val,"class": String(val).replace(/-/g, "")}); return !(key in el.style); }); $.each(props, function(index, value) { var cssPrefix = $("style").attr("data-prefix"); if (value in el.style === false) { $.fn.pfx = function(prop, pfxprop, q) { return $("style").html($("style").text() .replace(new RegExp(prop, "g"), q + $("style").attr("data-prefix") + pfxprop)) }; $("style").pfx("@keyframes", "keyframes", "@") .pfx(value, value, ""); }; }); }());以获取功能

{{1}}

github https://github.com/guest271314/prefix/blob/master/prefix.1.1.min.js

使用jQuery检测浏览器

2 个答案: