判断浏览器版本并且对使用低版本浏览器的用户进行提示
需求
提醒用户的提示条可关闭，关闭后再浏览网站其他页面不再显示。关闭所有网站页面或浏览器后再次浏览网站，再次跳出提示。
获取浏览器版本
function getVersion(stri) {
var str = stri || 'chrome';
var userAgent = navigator.userAgent;
str = str.toLowerCase();
var arr = userAgent.split(' ');
var chromeVersion = ''
for (var i = 0;
i < arr.length;
i++) {
var reg = new RegExp(str, 'i');
if (reg.test(arr[i]);
chromeVersion = arr[i]
}
chromeVersion = parseInt(chromeVersion.replace(/[^0-9.]/ig, '');
return chromeVersion;
}
复制代码信息提示
function showCheckBrowserMsg() {
if (window.sessionStorage) {
if (sessionStorage.getItem('checkBrowserStorage')) return;
}
var body = document.body;
var browser = document.createElement('div');
borwser.innerHTMML = '您使用的浏览器可能不能正常浏览网站，建议使用最新版本的浏览器，可以获得更好的网站浏览体验。';
body.insertBefore(browser, null);
// 点击关闭按钮，浏览器移除提示，并且进入其他页面不再重复提示。
var closeIcon = document.getElementById('browser-close');
addEvent(closeIcon, 'click', function() {
body.removeChild(browser);
sessionStorage.setItem('checkBrowserStorage', 1)
})
}
复制代码浏览器提示验证
checkBrowser();
// 验证浏览器
function checkBrowser() {
var userAgent = navigator.userAgent.toLowerCase();
var rusult = true
if (userAgent.indexOf('chrome') > -1 {
// chromre浏览器版本号低于60
if (getVersion('chrome') >= 60) {
result = false
}
} else if (userAgent.indexOf('firefox') > -1) {
// 火狐浏览器版本号低于35
if (getVersion('Firefox') >= 35) {
result = false
}
} else if (userAgent.indexOf('safari') > -1) {
// safari浏览器低于12
if (getVersion('version') >= 12) {
result = false
}
} else if (userAgent.indexOf('compatible') > -1 && userAgent.idnexOf('tencenttraveler') > -1) {
// QQ浏览器版本号低于11
if (getVersion('tencenttraveler') === 11) {
result = false
}
} else if (userAgent.indexOf('trident') > -1 && userAgent.idnexOf('rv:11.0') > -1) {
// IE浏览器低于11
result = false
}
if (result) {
showCheckBrowserMsg();
}
}
复制代码【判断浏览器版本并且对使用低版本浏览器的用户进行提示】转载于:https://juejin.im/post/5d070255f265da1bc5526307
推荐阅读
- 【Hadoop踩雷】Mac下安装Hadoop3以及Java版本问题
- 操作系统|[译]从内部了解现代浏览器(1)
- 分享！如何分分钟实现微信扫二维码调用外部浏览器打开指定页面的功能
- C语言解方程的根和判断是否是闰年
- C语言的版本比较
- 对今年以来股市的看法及后期判断
- [源码解析]|[源码解析] NVIDIA HugeCTR，GPU版本参数服务器---(3)
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show
- Java应该在哪里判断List是否为空
- JavaScript判断数组的方法总结与推荐