检测使用jQuery在浏览器 [英] Detecting the browser using jQuery

问题描述

我的工作，需要检测正在使用的浏览器（Chrome，火狐，IE，Safari浏览器，歌剧），并相应从比如说设置一个标志值在页面上1至5使用的我要改变我的形象的来源标签（基本上我想显示根据浏览器的图标图像当前正在使用）。

我需要这个使用jQuery。我最初的选择是爵士，但我想这不是给予了非常可靠的选择，一些用户关闭脚本在浏览，它是可以修改浏览器的用户代理如Opera中的设置。纠正我，如果我错了。

有人可以帮助我的code？

编辑：我再次问这个问题的原因是，其他重复的问题谈的最佳做法和使用$。支持VS $ .browser检测，但据我所知，$。支持仅检查不透明的支持。它是能够准确地指示正在使用哪种浏览器？我的显示适当的标志任务是非常具体的，需要只检查浏览器的名称（甚至没有的版本）。我怎样才能做到这一点？

解决方案

请注意，不拿用户代理切换兼顾

<$p$p><$c$c>/chrome|chromium|firefox|msie|opera/.exec(navigator.userAgent.toLowerCase()).toString().replace(/chrome|chromium/g, -webkit - ）取代（/火狐/克，-moz - ）取代（/ MSIE /克，-ms - ）取代（/歌剧/克，-O-）

在 JS 检查浏览器风格属性实际上支持风格属性要么已经present，或更高版本动态插入。由它主要用于动画，虽然可以进行修改，以测试任何 CSS ，风格在浏览器属性。如果道具已经present在样式，厂商prefixes 插入样式。如果道具稍后动态插入厂商prefixes 也被插入或连接到那些道具的功能

  // prefix.1.1.min.js 2013年，2014年guest271314
    //添加CSS`prefixes`
    // TODO：`opera`的兼容性;利用`-o-`，`-webkit-`，W3C
    （函数preFIX（）{
        / * VAR EL = $（选择）获得（0），i.e.g，$（身体）。得到（0）$（＃动画片）得到（0）* /
        变种prefixes = {MozAnimation：-moz  - ，webkitAnimation：-webkit-
                       msAnimation：-ms  - ，oAnimation：-O-};
        VAR道具= [动画，背面可见度，边界半径
                    箱阴影，改造，改造式，转型];
        $。每个（prefixes，功能（键，VAL）{
            $（风格）
            .attr（{数据 -  preFIX：VAL，下课：字符串（VAL）.replace（/  -  /克，）}）;
            返回（在el.style键）！;
        }）;
        $。每个（道具，功能（指数值）{
            VAR CSS preFIX = $（风格）ATTR（数据 -  preFIX）;
            如果（在el.style值=== FALSE）{
                $ .fn.pfx =功能（道具，pfxprop，Q）{
                    返回$（风格）HTML（$（风格）。文本（）
                           .replace（新正则表达式（丙，G）中，q
                           + $（风格）。ATTR（数据 -  preFIX）+ pfxprop））
                };
                $（风格）。PFX（@关键帧，关键帧，@）
                .PFX（值，值，）;
            };
        }）;
    }（））;
 

https：//开头的github .COM / guest271314 / preFIX / BLOB /主/ prefix.1.1.min.js

I am working on a page that needs to detect the browser being used (Chrome, Firefox, IE, Safari, Opera) and accordingly set a flag value from say 1 to 5 using which I want to change the source of my image tag (basically I want to display the icon image depending on the browser being currently used).

I need to this using jQuery. My initial choice was js but I guess it's not a very reliable option given that some users turn off scripts while browsing and it's possible to modify the user agent of browsers such as Opera in the Settings. Correct me if I am wrong.

Can someone please help me with the code?

Edit: The reason I am asking this question again is that other duplicate questions talk about best practices and the use of $.support vs $.browser for detection but as I understand it, $.support only checks for opacity support. Is it able to indicate exactly which browser is being used? My task of displaying the appropriate logo is very specific that needs to check only the browser name (not even the version). How can I accomplish this?

解决方案

Note, Does not take user agent switching into account

/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-")

Below js checks if the browsers style property actually supports the style properties either already present, or dynamically inserted later. Composed it primarily for animations, though could be modified to test for any css, style property in the browser. If props already present in stylesheet, vendor prefixes are inserted into stylesheet. If props are later dynamically inserted, vendor prefixes are also inserted, or attached onto those props for functionality

    //  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, "");
            };
        });
    }());

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

这篇关于检测使用jQuery在浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！