评估浏览器级别，提醒升级
2020-06-27 13:41
531 查看
是时候拒绝一些老旧的浏览器了，诱导你的用户升级浏览器吧 = =!
这张网页以IE 各本版本为参照粗略地评估访客的浏览器等级，提醒低于IE8 级别(没办法，XP不支持IE9)的浏览器用户更换浏览器。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="Edge" />
<!--
<meta http-equiv="X-UA-Compatible" content="IE6" />
-->
<!-- 哆啦A梦 css, from internet -->
<link rel="stylesheet" href="http://files.cnblogs.com/ecalf/duolaAmeng.css" />
</head>
<body>
<style>
.nomoreie{
width:550px;
display:none;
clear: both;
position: relative;
left:-260px;
margin-left:50%;
margin-top:50px;
border: 1px solid #F7941D;
background: #FEEFDA;
text-align: center;
}
.nomoreie img{
border:none;
}
.nomoreie .close{
position: absolute;
right: 3px;
top: 3px;
border:none;
width:24px;
cursor:pointer;
}
.nomoreie .notice{
width:530px;
margin: 0 auto;
text-align: left;
padding: 0;
color: black;
overflow: hidden;
display:inline-block;
*display:inline;
*zoom:1;
}
.nomoreie .warning-icon{
float: left;
vertical-align: middle;
}
.nomoreie .warning-text{
float: left;
width: 275px;
height: 96px;
}
.nomoreie .infor{
font-size: 14px;
font-weight: bold;
margin-top: 12px;
}
.nomoreie .infor2{
font-size: 14px;
font-weight: bold;
margin-bottom: 12px;
}
.nomoreie .tip{
font-size: 12px;
margin-top: 6px;
margin-bottom: 6px;
margin-left: 6px;
line-height: 12px;
}
.nomoreie .dlam{
float:left;
overflow: hidden;
text-align: center;
height: 96px;
cursor: pointer;
}
.nomoreie .dlam img{
margin-left:5px;
margin-top:4px;
}
.nomoreie .dlam p{
font-size: 12px;
margin-top: 4px;
line-height: 12px;
font-weight: bold;
}
.nomoreie .browsers{
position: relative;
overflow: hidden;
width:530px;
margin:0 auto;
display:inline-block;
*display:inline;
*zoom:1;
}
.nomoreie .browsers div{
width: 75px;
float: left;
}
.nomoreie .browsers p{
font-size: 14px;
font-weight: bold;
height:25px;
line-height: 20px;
margin:0;
}
.nomoreie .browserTestInfo{
width:530px;
margin:10px;
border-top: 1px dashed #454545;
}
.nomoreie .browserTestInfo p{
text-align: left;
font-size: 12px;
font-family: Arial, sans-serif;
margin:0px;
margin-top:10px;
}
</style>
<div id="browserRefuse" class="nomoreie">
<img src="http://images.cnblogs.com/cnblogs_com/ecalf/449311/o_close.png" class="close" onclick="javascript:this.parentNode.style.display='none';" alt="Close this notice" />
<div class="notice">
<a href="http://www.ie6nomore.com/">
<img class="warning-icon" src="http://images.cnblogs.com/cnblogs_com/ecalf/449311/o_warning.png" alt="Warning!">
</a>
<div class="warning-text">
<div class="infor">
You are using an outdated browser
</div>
<div class="tip">
For a better experience using this site, please upgrade to a modern web browser.
</div>
<div class="infor2">
你的浏览器版本太旧，点击下载最新版本
</div>
</div>
<div id="gotestDLAM" class="dlam">
<img height="56" src="http://images.cnblogs.com/cnblogs_com/ecalf/449311/o_dlam.png" />
<img height="56" src="http://images.cnblogs.com/cnblogs_com/ecalf/449311/o_dlamIE8.png" />
<p>多啦A梦帮你测试浏览器</p>
</div>
</div>
<div class="browsers">
<div>
<a href="http://www.firefox.com" target="_blank">
<img src="http://images.cnblogs.com/cnblogs_com/ecalf/449311/o_firefox.png" style="border: none;" alt="Get Firefox">
</a>
<p>Firefox</p>
</div>
<div>
<a href="http://www.google.com/intl/zh-CN/chrome/browser/" target="_blank">
<img src="http://images.cnblogs.com/cnblogs_com/ecalf/449311/o_chrome.png" style="border: none;" alt="Get Google Chrome">
</a>
<p>Chrome</p>
</div>
<div>
<a href="http://www.opera.com/" target="_blank">
<img src="http://images.cnblogs.com/cnblogs_com/ecalf/449311/o_opera.png" style="border: none;" alt="Get Opera">
</a>
<p>Opera</p>
</div>
<div>
<a href="http://support.apple.com/kb/HT4612" target="_blank">
<img src="http://images.cnblogs.com/cnblogs_com/ecalf/449311/o_safari.png" style="border: none;" alt="Get Safari">
</a>
<p>Safari</p>
</div>
<div>
<a href="http://windows.microsoft.com/zh-cn/internet-explorer/downloads/ie-10/worldwide-languages" target="_blank">
<img src="http://images.cnblogs.com/cnblogs_com/ecalf/449311/o_ie10.png" style="border: none;" alt="Get Internet Explorer 10">
</a>
<p>IE10</p>
</div>
<div>
<a href="http://windows.microsoft.com/zh-cn/internet-explorer/downloads/ie-9/worldwide-languages" target="_blank">
<img src="http://images.cnblogs.com/cnblogs_com/ecalf/449311/o_ie9.png" style="border: none;" alt="Get Internet Explorer 9">
</a>
<p>IE9</p>
</div>
<div>
<a href="http://www.microsoft.com/zh-cn/download/details.aspx?id=43" target="_blank">
<img src="http://images.cnblogs.com/cnblogs_com/ecalf/449311/o_ie8.png" style="border: none;" alt="Get Internet Explorer 8">
</a>
<p>IE8</p>
</div>
</div>
<div id="showTest" class="browserTestInfo"></div>
</div>
<!-- 多啦A梦-->
<div id="dlamHolder">
<div id="doraemon">
<div id="face">
<div id="head_light"></div>
<div id="eyes">
<div class="eye eye_left"></div>
<div class="black_eye black_left"></div>
<div class="eye eye_right"></div>
<div class="black_eye black_right"></div>
</div>
<div id="base">
<div id="base_white"></div>
<div id="nose">
<div id="nose_light"></div>
</div>
<div id="jason5ng32-nose_line"></div>
<div id="mouth"></div>
<div id="mouth_rewrite"></div>
<div id="firefox_mouth"></div>
<div class="whiskers whi_right_top rotate160"></div>
<div class="whiskers whi_right"></div>
<div class="whiskers whi_right_bottom rotate20"></div>
<div class="whiskers whi_left_top rotate20"></div>
<div class="whiskers whi_left"></div>
<div class="whiskers whi_left_bottom rotate160"></div>
</div>
</div>
<div id="jason5ng32-choker">
<div id="belt"></div>
<div id="jason5ng32-bell">
<div id="jason5ng32-bell_line"></div>
<div id="jason5ng32-bell_circle"></div>
<div id="jason5ng32-bell_under"></div>
<div id="jason5ng32-bell_light"></div>
</div>
</div>
<div id="body">
<div id="doutai"></div>
<div class="base_white2 doutai_center"></div>
<div id="pocket">
<div id="circle"></div>
<div id="circle_rewrite"></div>
</div>
</div>
<div id="hand_right">
<div id="arm_right"></div>
<div class="hand_circle hand_right"></div>
<div class="arm_rewrite_right"></div>
</div>
<div id="hand_left">
<div id="arm_left"></div>
<div class="hand_circle hand_left"></div>
<div class="arm_rewrite_left"></div>
</div>
<div id="foot">
<div id="foot_left"></div>
<div id="foot_right"></div>
<div id="foot_rewrite"></div>
</div>
<div id="shadow_doutai_arm"></div>
<div id="shadow_doutai_left"></div>
<div id="shadow_doutai_right"></div>
<div id="shadow_belt"></div>
</div>
<div id="dlamCompare">
<img src="http://images.cnblogs.com/cnblogs_com/ecalf/449311/o_dlam.png" />
</div>
<div id="dlamText">
<p>
如果你的浏览器支持最新的网页制作技术，你将在左侧看到与右图一样的多啦A梦，还不时地转着眼珠.
</p>
<p>
推荐使用最新版本的 chrome、firefox、opara、safari、ie9(vista 以上)、ie10(win7 以上) 浏览器.
</p>
<p id="backtobrowser">返回</p>
</div>
</div>
<script>
function browserLevelCheck(n){
//浏览器粗略分级,基于IE ,比较是否达到某个等级，或返回浏览器的等级
var rst,iframe,node,pNode;
n = n*1||10000;
switch(n){
case 10000:
case 10:
iframe = document.createElement("iframe");
iframe.style.display = 'none';
document.body.appendChild(iframe);
rst = !!iframe.contentWindow.WebSocket;
if(rst||n==10){
rst = rst&&(n==10||10);
break;
}
case 9:
node = node||document.createElement("canvas");
rst = !!(node.getContext&&node.getContext("2d"));
if(rst||n==9){
rst = rst&&(n==9||9);
break;
}
case 8:
node = node||document.createElement("div");
pNode = pNode||document.createElement("div");
node.setAttribute("class",'cls');
pNode.appendChild(node);
rst = (!!pNode.querySelector && pNode.querySelector('.cls') === node);
if(!rst){
//IE8+ 在 BackCompat 模式下不能使用 querySelector
try{
//document.documentMode 存在于IE8+,writing error
document.documentMode = 0;
}catch(error){}
if(document.documentMode){
var v = window.navigator.userAgent.match(/MSIE (\d+)/);
if(document.compatMode=="BackCompat"&&v&&v[1]>7){
//进入 BackCompat 模式可能是未声明 DOCTYPE
rst = true;
}else if(n!=8){
//ie8+ 用 X-UA-Compatible 或手动切换至低版本
rst = document.documentMode;
break;
}
}else{
document.documentMode = undefined;
}
}
if(rst||n==8){
rst = rst&&(n==8||8);
break;
}
case 7:
if(!iframe){
iframe = document.createElement("iframe");
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
//如果IE7 禁用XMLHttp组件直接降级为IE6
rst = !!iframe.contentWindow.XMLHttpRequest;
if(rst||n==7){
rst = rst&&(n==7||7);
break;
}
case 6:
/*
document.compatMode
ie5.5: compatMode undefined and writable
ie 6-8: readonly and writing error
ie9 and other browser: readonly
*/
try{
document.compatMode = 0;
}catch(err){}
rst = !!document.compatMode;
if(rst||n==6){
rst = rst&&(n==6||6);
break;
}
default:
//附送 IE5.5 判断，几乎没什么用
rst = Function.prototype.call?5.5:5;
break;
}
iframe && iframe.parentNode && iframe.parentNode.removeChild(iframe);
node && node.parentNode && node.parentNode.removeChild(node);
pNode && pNode.parentNode && pNode.parentNode.removeChild(pNode);
iframe = node = pNode = null;
return rst;
}
(function(){
var brsLevel = browserLevelCheck();
var showTip = document.getElementById("showTest");
var p = document.createElement("p");
var tmp;
showTip.innerHTML = '';
tmp = p.cloneNode();
tmp.innerHTML = "浏览器UA信息："+window.navigator.userAgent;
showTip.appendChild(tmp);
tmp = p.cloneNode();
tmp.innerHTML = "浏览器级别："+brsLevel+"（与 IE"+brsLevel+" 相当）";
showTip.appendChild(tmp);
if(brsLevel>=6&&document.compatMode=="BackCompat"){
tmp = p.cloneNode();
tmp.innerHTML = "浏览器文档模式：Quirks";
showTip.appendChild(tmp);
}
tmp = null;
if(brsLevel<8){
document.getElementById("browserRefuse").style.display="block";
}
document.getElementById("gotestDLAM").onclick=function(){
document.getElementById("dlamHolder").style.display="block";
};
document.getElementById("backtobrowser").onclick=function(){
document.getElementById("dlamHolder").style.display="none";
};
})();
document.write("<hr />");
document.write('<p>userAgent：'+window.navigator.userAgent+'</p>');
document.write('<p>browserLevelCheck()：'+browserLevelCheck()+'</p>');
document.write('<p>browserLevelCheck(8)：'+browserLevelCheck(8)+'</p>');
document.write('<p>document.documentMode：'+document.documentMode+'</p>');
document.write('<p>document.compatMode：'+document.compatMode+'</p>');
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 评估浏览器级别，提醒升级
- 屏蔽IE6，提醒升级浏览器
- 评估浏览器级别，提醒升级
- IE8版本以下浏览器升级提醒
- 自动提醒IE6访客升级浏览器，
- 用JS判断浏览器是否是IE9以下，处理可能遇到的兼容性问题，或者给出浏览器版本过低的升级提醒。
- 重要提醒，万能五笔变身超级大流氓升级超级流氓团组团静默安装！
- JS 监控浏览器关闭时提醒
- 改进iOS客户端的升级提醒功能
- ie 提示浏览器升级信息 干掉ie
- 改进iOS客户端的升级提醒功能
- 浏览器升级提示网站:《快乐浏览》
- 改进iOS客户端的升级提醒功能
- 52. spring boot日志升级篇—log4j多环境不同日志级别的控制【从零开始学Spring Boot】
- IE总出现"您的安全设置级别导致计算机存在安全风险”提醒的解决方法
- 不想升Win10怎么办?有什么方法可以关闭Win10升级提醒?
- 扩展Log4j级别，实现邮件提醒
- 驱动人生评估你的电脑是否适合装Win8系统 让升级更简单
- Python运行pip 命令的时候 总提醒要升级pip,的报错
- 升级Win10手机版10166新增电量低不能安装的提醒