experiences

How to remind IE upgrade in new version 11.

如何在 IE11 以下进行浏览器提示升级

Posted by Zhenzhen Lin on 2017-02-09

前言

想说一个好消息, 公司决定放弃IE10, 包括IE10以下的IE浏览器兼容了, 美哉!

但是, 问题来了, 如何做这个监测, 条件是除了 IE11, 非IE, 说白了就是 IE10, IE9, IE8, IE7, IE6等IE低版本浏览器, 然后提示浏览器升级.

本节做个记录, 如何改了又改, 测试一次又一次, 终于有个正确安全的解决方法了, 5行代码搞定, 美哉!

条件 HACK

大家都知道, IE为自己的浏览器提供了IE能识别的条件HACK, 即在 head 头部加入以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--[if !IE]> <!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

这种是条件hack, 只有IE会认识, 其中lt是英文单词less than-小于的意思, 那gte是great than or equal-大于等于的意思, 都可以搭配, 后面的版本号可以写 5, 6, 7, 8, 9

应该注意到 [if IE] 或者是想到 [if lte IE 10] 就解决了问题, 但是IE从10, 包含 10 以上 11 已经不支持这种条件hack了, 意思就是IE10, IE11会忽略这个条件注释, 我们还是不能做提示在 IE10 即 IE10以下的浏览器.

官网有证实IE10不支持条件hack,
https://msdn.microsoft.com/en-us/library/hh801214(v=vs.85).aspx.aspx)

这个方法算pass了 ~ 哭

找像上述条件注释能判断是IE10的方法

找到了~

1
2
3
4
5
6
7
8
9
10
11
<!--[if lte IE 9]>
<script src="http://xxx.com/js/update-browser.js"></script>
<![endif]-->
<!--[if !IE]> <!-->
<script>
    if (/*@cc_on!@*/false) {
        document.write('<script src="http://xxx.com/js/update-browser.js"><\/script>');
    }
</script>
<!--<![endif]-->

上述条件注释, 还是在IE9 即IE9以下的IE浏览器能监测到, 所以先写一段IE识别的条件HACK.

而下面这句:

1
if (/*@cc_on!@*/false) {

各种StackOverflow查出来的, 仅在IE10是别的条件判断, 但是这个还是在每个浏览器都会走一遍js, 而且这个我目前没有查到有官方证实, 至少我没有找到资料. 而且觉得 @cc_on!@ 写在页面里面, 日后不方便追踪是什么.

所以本尝试也被pass了 ~ 哭

改变meta的X-UA-Compatible的渲染模式

1
2
<!-- 强制IE使用最新模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

本来这个X-UA-Compatible也是ie可以识别的, 所以就查了一些资料, 去把IE的渲染模式减低一些版本, 然后我们第一个方法的条件注释就可以用了, 高兴~

1
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">

或者

1
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7,IE=EmulateIE9" />

实验证明, 不奏效, 可能我疏忽饿那里没有更改, 但是就算更改了也不行, 因为最高版本 IE11 也会始终监测到这个渲染模式, 就会进入无限循环提示升级, 而且我们用 IE=Edge IE最新模式渲染就是正确的做法, 所以还是算了~

目测只能用js监测了

想到了, 先识别是IE, 然后获取IE版本信息, 如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var browser = {
    ua: navigator.userAgent.toLowerCase(),
    msie: function() {
        return /msie/.test(this.ua);
    },
    ie6: function() {
        var self = this;
        return self.msie() && /msie 6./.test(self.ua);
    },
    ie7: function() {
        var self = this;
        return self.msie() && /msie 7.0/.test(self.ua);
    },
    ie8: function() {
        var self = this;
        return self.msie() && /msie 8.0/.test(self.ua);
    },
    ie9: function() {
        var self = this;
        return self.msie() && /msie 9.0/.test(self.ua);
    },
    ie10: function() {
        var self = this;
        return self.msie() && /msie 10.0/.test(self.ua);
    }
};
if(!!browser.ie6() || !!browser.ie7() || !!browser.ie8() || !!browser.ie9() || !!browser.ie10()) {
    // 这里监测到了 IE10-IE6, 可以跳转提示升级了, YES~
}

上述代码太多了

考虑监测到非IE11的IE浏览器做跳转, 即IE10即IE10以下.

1
2
3
4
5
6
7
8
(function IEUpgrade() {
    if (!!window.ActiveXObject || "ActiveXObject" in window) {
        // 这里可以做跳转, 此时监测到 IE10 即 IE10 以下的IE浏览器
        return true;
    } else {
        return false;
    }
})();

window.ActiveXObject 这个是什么呢?

在使用XMLHTTPRequest对象发送请求和处理响应之前，我们必须要用javascript创建一个XMLHTTPRequest对象, IE把XMLHTTPRequest实现为一个ActiveX对象，其他的浏览器[如Firefox/Safari/Opear]则把它实现为一个本地的javascript对象. 参考链接

意思就是说只有IE可识别这个 ActiveXObject, 但是又有资料说, IE11重新定义了 ActiveXObject, 所以在IE11判断 !!window.ActiveXObject 是 false, 但是IE10即IE10以下某些浏览器还是均可是别的, 所以用了这句if.

实验测试证明, 这个判断也是可以滴, 拍手~

但是用这个独特的属性就验证某些信息, 总是感觉不可靠, 所以还得想办法 ~ 哭

5行代码最终成功

1
2
3
4
5
6
(function IEUpgrade(){
    var ua = window.navigator.userAgent.toLowerCase();
    if (/msie/.test(ua)) {
        //alert('该更新IE浏览器了');
    }
})();

这里只判断了 userAgent 是否有 msie, 因为 IE11 的 userAgent 里已经没有 msie, 所以匹配有 msie 的就是 IE11 以下的IE浏览器, 其他浏览器的 userAgent 也是没有 msie 的, 只有用了ie内核的才有, 然后做你想做的~

记录IE的userAgent信息

1
2
3
4
5
6
7
8
9
10
11
IE11:
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; F9J; CMDTDFJS; rv:11.0) like Gecko
IE10:
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; F9J; CMDTDFJS;)
IE9:
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; F9J; CMDTDFJS;)
IE8:
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; F9J; CMDTDFJS;)

感言

Happy Ending By Two Days.

FEATURED TAGS
experiences
FRIENDS