在网站开发中要判断IE浏览器版本,我们往往是通过匹配UA特征来判断,但是UA并不十分可靠,因为UA可以被修改。
IE8开始新增了一个 document.documentMode 属性,通常情况下我们页可以通过其判断IE版本,但是这个方法获取的也仅是决定HTML/CSS/JS解析引擎的文档模式,并非真正的IE客户端版本。文档模式除了可以通过F12开发者控制台修改,也可以通过 IE 兼容性标记 X-UA-Compatible 修改。
那么,怎么判断IE浏览器的真正版本(客户端版本)呢?
8IE 兼容性标记 X-UA-Compatible 解释和用法
3如何判断IE真正渲染内核(文档模式)
条件编译介绍
-
1
IE有一个类似 if IE 条件注释的机制,叫 @cc_on 条件编译。
不同条件注释的是,条件注释仅支持到 IE9 ,而且受文档模式影响。而条件编译支持到 IE10,不受文档模式影响。
举个例子,你的IE版本是10,默认情况下,<!––[if IE 8]><![endif]––>条件注释语句不会生效,@cc_on 条件编译中的 @_jscript_version 值是 10。
当你通过F12开发者控制台或者 X-UA-Compatible 兼容性标记将文档模式调整为 IE8 时,<!––[if IE 8]><![endif]––> 会生效,但 @_jscript_version 并不受影响,依然是10。
所以,我们可以通过条件编译中的 @_jscript_version 来判断当前IE浏览器的客户端版本。
END
条件编译判断IE版本
-
1
以下是一个完整示例:
<script>
/*@cc_on
@if (@_jscript_version >= 10)
alert("你正在使用 IE10 浏览器!");
@elif (@_jscript_version == 9)
alert("你正在使用 IE9 浏览器!");
@elif (@_jscript_version == 5.8)
alert("你正在使用 IE8 浏览器!");
@elif (@_jscript_version == 5.7 && window.XMLHttpRequest)
alert("你正在使用 IE7 浏览器!");
@elif (@_jscript_version == 5.6 || (@_jscript_version == 5.7 && !window.XMLHttpRequest))
alert("你正在使用 IE6 浏览器!");
@elif (@_jscript_version == 5.5)
alert("你正在使用 IE5.5 浏览器!");
@else
alert("你正在使用 IE5 或更远古的 IE 浏览器!");
@end
@*/
</script>
-
2
需要注意的是, @cc_on 条件编译语句仅在 IE10 及更旧版IE中有效,在其他浏览器中将被忽略。
看到这里你也许会奇怪,既然仅在 IE10 中有效,为什么一开始的 @if (@_jscript_version >= 10) 是用大于等于号呢?
因为如果是等于号,当你使用 IE11 浏览器模拟 IE10 及旧版浏览器时将出错。因为模拟旧版IE时 @cc_on 语句生效了,但 @_jscript_version 依然是 11,导致一直向下匹配到 IE7 的条件的 window.XMLHttpRequest 时报错。因此要兼容 IE11 时需要使用大于等于号。
不过,这仅是兼容 IE11 浏览器模拟低版本IE的时候,并没有包含对 IE11 的判断。如果需要包含对 IE11 的判断,请看下一个例子。
-
3
这是一个包含IE11的代码示例:
<script>
var browserName = "unknow";
if (!!window.MSInputMethodContext && !!document.documentMode) {
browserName = "IE11";
} else {
/*@cc_on
@if (@_jscript_version == 11)
browserName = "IE11(是IE11,但文档模式不是)";
@elif (@_jscript_version == 10)
browserName = "IE10";
@elif (@_jscript_version == 9)
browserName = "IE9";
@elif (@_jscript_version == 5.8)
browserName = "IE8";
@elif (@_jscript_version == 5.7 && window.XMLHttpRequest)
browserName = "IE7";
@elif (@_jscript_version == 5.6 || (@_jscript_version == 5.7 && !window.XMLHttpRequest))
browserName = "IE6";
@end
@*/
}
alert("当前IE客户端版本是:" + browserName);
</script>
END
判断IE10或更旧版本
-
1
微软已经在2016年1月停止对 IE10 及更旧版本IE的支持和安全更新,仅保留 IE11 作为IE的最后一个版本,引导用户向新一代浏览器过渡。
因此,现在要判断IE版本往往不是为了针对性地做兼容,而是为了提醒用户进行浏览器升级。多数情况是要判断当前IE浏览器是否 IE10 或更旧版本,要做这个判断,除了使用 @if (@_jscript_version <= 10) 其实还有更简单的代码。
-
2
因为 @cc_on 语句仅支持到 IE10,在 IE11 中 @cc_on 代码块被当作普通的注释处理,因此,@cc_on 代码块只会在 IE10 及更旧版本IE执行,那么,只需判断是否IE10或更旧版本时我们只需这样:
<script>/*@cc_on alert("当前IE浏览器版本低于等于 IE10"); @*/</script>
-
3
IE10及以下版本跳转至IE浏览器升级提示页代码示例:
<script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>
5如何给网站添加IE浏览器升级提示
END
文章评论