评估浏览器级别，提醒升级
是时候拒绝一些老旧的浏览器了，诱导你的用户升级浏览器吧 = =!
这张网页以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>