前端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;
}
}
脚注
这只是我个人试着写的第一篇博客,用以记录自己在工作中的困惑或者可能对后面的工作有帮助的经验,谢谢!