预备知识:NodeList的实时性
通过 document.getElementsByTagName,document.forms ,document.images 等方法获取到nodelist以后 里面的内容会适时的更新 这一点区别与array
我们利用它和条件注释来检测oldIE的版本
我认为 这是最靠谱的方法
--------------------------------华丽的分割线 请听我娓娓道来------------------------------------
搞前端的一大痛苦就是要搞定各个浏览器. 在这个问题上最牛逼最烦最装逼最可恶的要是ie大哥了.
不是ie的manager吃白饭,ie受制于操作系统的限制,不能随便升级 . ie永远做不了”版本帝”
但是ie9以后速度就很快了. win8.1上ie启动速度不亚于chrome
"浏览器能力检测优于浏览器检测”
if(!!document.addEventListener)//能力检测 { alert('我可以通过document.addEventListener添加事件') }
业界公认的观点.
但是有时候还是避免不了浏览器的检测 今天咱来说说ie大哥的检测
普遍的检测方法有以下几种
- userAgent
你的代码里 是不是有这样一句
var isIE6 = window.navigator.userAgent.indexOf('IE 6') > 0; // O(∩_∩)O哈哈~
我感觉这种方法最萌了
通常情况下 他不会有什么问题 但是看上去非常的屌丝(个人意见)
而且userAgent 这个属性我们可以更改的 百度一下 “更改useragent”
2. 怪癖检测
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
var isIE8=isIE&&!!document.documentMode;
var isIE7=isIE&&!isIE6&&!isIE8;
通常我们仅支持到ie6 这样的代码到ie5下妥妥的挂掉
3.条件注释
varisIE6=false;
document.write("<!--[iflte IE6]><script>isIE6=true;</scr"+"ipt><![endif]-->");
if(isIE6){
alert('你当前的浏览器是IE6或者以下');
}
这样的方法很稳定 但是不优雅 而且写入了dom元素
小弟提供一种方法大家参考一下
咔咔上代码:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>IEVersion</title> <script> var IEVersion = (function () { //返回结果 var result = { isIE: false, //是否ie version: -1 //版本号 } //#region ie4_9 var _version = 3;//ie版本号 临时的 var ie4_9 = false; var odiv = document.createElement('div'); /* 目标元素 这个元素不需要append 在这个元素内插入ie条件注释 注释内包含一个标签 inner_element */ var inner_element = odiv.getElementsByTagName('i'); while (odiv.innerHTML = '<!--[if gt IE ' + (++_version) + ']><i></i><![endif]-->', inner_element[0]) { ie4_9 = true; } //#endregion if (ie4_9 && (_version > 3 && _version <= 9)) { result = { isIE: true, version: _version }; } else if (document.all) { result = { isIE: true, version: 10 }; } else if ("ActiveXObject" in window) { result = { isIE: true, version: 11 }; } return result; })(); </script> <script> if (IEVersion.isIE) { alert(IEVersion.version); } </script> </head> <body> <!--[if IE 7]>所谓的双核浏览器的兼容模式会显示这个 因为他们跑的是ie7模式<![endif]--> </body> </html>
ps :
ie4-9 用条件注释来检测 新建的dom元素不需要插入到页面中
ie10不支持条件注释 但是ie10 支持document.all
ie11 就用("ActiveXObject" in window)来检测一下吧
有么问题欢迎大家讨论 O(∩_∩)O哈哈~