前端js判断浏览器类型_judgebrowser-CSDN博客

本文链接：https://blog.csdn.net/YatesJu/article/details/82733364

前端js判断浏览器类型

最近在对老项目进行一些样式方面的调整时，遇到一个图片旋转的需求；因为项目当时是基于IE8及以下的浏览器写的，
这是计算图片旋转的代码：

旋转图片的代码块

/**
 * 旋转图片
 * @param {} degree    旋转多少度
 */
rotate: function (degree) {
    var degreeToRotate = 0;
    var deg2radians = Math.PI * 2 / 360;
    this.degreeToRotate += degree;
    this.degreeToRotate = this.degreeToRotate % 360;
    rad = this.degreeToRotate * deg2radians;
    costheta = Math.cos(rad);
    sintheta = Math.sin(rad);
    this.img.oImage.filters.item(0).M11 = costheta;
    this.img.oImage.filters.item(0).M12 = -sintheta;
    this.img.oImage.filters.item(0).M21 = sintheta;
    this.img.oImage.filters.item(0).M22 = costheta;
}

代码调用:

/**
* 向右旋转90度
*/
turnRight: function () {
    var value = 0;
    if (this.judgeBrowser()) {
        $('#suning_image').click(function() {
            value += 90;
            $(this).css('transform', 'rotate(' + value + 'deg)');
        });
    } else {
        this.rotate(90);
    }
}

因为filters是要调用IE浏览器自带的接口，这个接口在Chrome，FireFox(包括IE8)以上的浏览器下并不使用；但是

$(this).css(‘transform’, ‘rotate(’ + value + ‘deg)’);

又是CSS3的语法，IE8及以下浏览器并不支持，故此才引出了需要根据浏览器类型来调用不同的js代码的问题，
下面的这段js也是我借鉴网上的写法，修修改改，变成适合自己的代码

判断浏览器类别

judgeBrowser: function () {
     var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
     var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE浏览器
     var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器
     var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
     var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
     if (isIE) {
         var version = navigator.appVersion.split(";");
         var trim_Version = version[1].replace(/[ ]/g, "");
         var browser_level = trim_Version.substring(4, trim_Version.lastIndexOf("."));   // 取到浏览器级别
         if (browser_level <= 8) {
             return false;
         } else {
             return true;
         }
     } else if (isEdge) {
         return true;
     } else if (isFF) {
         return true;
     } else if (isChrome) {
         return true;
     }
 }