自动识别浏览器类型及版本号(控制台查看)
2019-07-31 本文已影响0人
zkzhengmeng
根据浏览器类型和型号 , IE9以下浏览器提示用户更新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>判断浏览器型号及版本号</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.loading{
width:100%;
height: 100%;
position: fixed;
top:0;
left:0;
z-index: 99;
background: rgba(0, 0, 0, 0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)\9;
display: none;
}
.loading .loading_cent{
width:500px;
height: 260px;
position: absolute;
top:50%;
left:50%;
margin: 0 10px;
font-size: 20px;
background: #FFFFFF;
margin-top: -130px;
margin-left: -250px;
}
.loading_cent .title{
height: 40px;
line-height: 40px;
padding: 0 10px;
background: darkkhaki;
}
.loading_cent .title .text{
float: left;
}
.loading_cent .title .close{
width:80px;
text-align: right;
float: right;
cursor: pointer;
font-size: 18px;
}
button{
width: 100px;
height: 40px;
outline: none;
border: 0;
background: darkcyan;
cursor: pointer;
margin-left: 10px;
border-radius: 6px;
}
button:nth-child(1){
background: #0099FF;
}
.butt{
text-align: right;
position: absolute;
bottom:10px;
right:10px
}
.tx{
margin-top: 40px;
height:180px;
font-size: 16px;
padding: 0 10px;
}
.tx div{
margin-top: 60px;text-align: center;
}
</style>
</head>
<body>
<div >
<img src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" style="width: 100%;height: auto;"/>
</div>
<div class="loading" id="loading">
<div class="loading_cent">
<h6 class="title">
<span class="text">温馨提醒</span>
<em class="close" id="close">x</em>
</h6>
<div class="tx">
<div>您的浏览器版本过低，为了您的最佳体验，请先升级浏览器。</div>
</div>
<div class="butt"><button type="button" class="close1" id="close1">取消</button><button type="button">确定</button></div>
</div>
</div>
<script>
(function browerTypeAndVersion() {
var sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
var browserType = ''; //浏览器品牌
var browserVersion = ''; //浏览器版本号
(s = ua.match(/msie ([\d.]+)/)) ? sys.ie = s[1]: // ie11没有msie 可以用if("ActiveXObject" in window)来判断 true为ie false为非ie
(s = ua.match(/firefox\/([\d.]+)/)) ? sys.firefox = s[1] : // 另外可以用ua.match(/firefox[\/\s](\d+)/)来判断是否为firefox
(s = ua.match(/chrome\/([\d.]+)/)) ? sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? sys.safari = s[1] : 0;
//以下进行测试
if (sys.ie) {
browserType = 'IE';
browserVersion = parseInt(sys.ie.split(":")[0])
console.log(browserType + ' = ' + browserVersion);
if(browserVersion<=8){
document.getElementById('loading').style.display='block'
}
}
if ("ActiveXObject" in window && !sys.ie) {
browserType = 'IE';
console.log(browserType + ' = ' + 11);
}
if (sys.firefox) {
browserType = 'Firefox';
browserVersion = sys.firefox.split(":")[0]
console.log(browserType + ' = ' + browserVersion);
}
if (sys.chrome) {
browserType = 'Chrome';
browserVersion = sys.chrome.split(":")[0]
console.log(browserType + ' = ' + browserVersion);
}
if (sys.opera) {
browserType = 'Opera';
browserVersion = sys.opera.split(":")[0]
console.log(browserType + ' = ' + browserVersion);
}
if (sys.safari) {
browserType = 'Safari';
browserVersion = sys.safari.split(":")[0]
console.log(browserType + ' = ' + browserVersion);
}
browserVersion = ''
})()
document.getElementById('close').onclick=function(){
document.getElementById('loading').style.display='none'
}
document.getElementById('close1').onclick=function(){
document.getElementById('loading').style.display='none'
}
</script>
</body>
</html>
