旧版 IE 升级提示弹窗代码

此代码是 旧版 Internet Explorer 淘汰行动 一部分,如需查看项目介绍请点击链接查看,本页只介绍弹窗代码。

弹窗代码的由来

2014年8月,旧版IE淘汰行动初上线时,仅提供升级提示页跳转代码,设计思路来自微软官网。采用页面跳转方式本意是,网站在不支持的旧版IE中往往是错版,因此可以直接跳转至升级提示页,避免加载无用的资源的同时在第一时间告诉用户该升级浏览器了。

但升级提示页并未能满足所有实际场景。例如,有的网站以文字内容为主,尽管在旧版IE中网站排版出现错位,却不影响文字内容的展现。因此有的网站主希望只提示用户进行浏览器升级,是否升级由用户决定,用户选择忽略升级提示也能继续访问错版的网页。

于是,旧版IE淘汰行动新增旧版IE升级提示弹窗代码,以适应更多场景。

弹窗代码的特性

弹窗代码最大的特性莫过于不跳出原有网页,直接在当前网页展示,用户可以选择关闭弹窗继续浏览网页内容。在代码配置方面,可以决定用户关闭弹窗后多少分钟内不再出现。此外,通过 if IE 以及 @cc_on 语句的配合,弹窗代码将只再需要进行升级提示的IE版本中加载,其他浏览器不加载。

关于弹窗的设计

实际上,旧版IE升级提示弹窗的代码在网上并不少见,大部分是采用头部横幅一句话提示,小部分一张大图加一段简要文字提示,对小白用户并不友好。至今仍使用旧版IE浏览器的用户,除了极少数专业人士,剩下的都是小白。专业人士使用旧版IE往往是出于实际需要(例如测试),无论你如何提示他们都不会升级;而小白用户则往往是因为不懂电脑,因此提示语不能无足轻重,否则无法说服他们升级,也不能只使用术语,否则小白看不懂。

因此,本弹窗的设计定位针对小白用户,主配色采用黄、白,整体偏暖,大标题采用深红色并配以加粗的“危险!”、“请立即升级!”等警示字样,营造一种需要立即升级的迫切感,引导用户尽快完成升级到新版浏览器。另,特别为使用国产双核浏览器IE兼容模式的用户提供切换至极速内核的示意图,引导用户通过切换内核来正常访问网页,在避免流量流失的同时为用户提供最好的访问体验。查看弹窗截图

弹窗代码

了解 if IE 和 @cc_on 语句

if IE 是IE浏览器特有的条件注释语句,语法如 <!--[if lte IE 9]><![endif]-->,用于判断IE版本,只在IE9及更旧版IE有效,在IE10、IE11或其他浏览器会被当作普通注释忽略;@cc_on 是IE浏览器特有的条件编译语句,语法如 /*@cc_on @*/,只在IE10及更旧版本IE有效,在IE11或其他浏览器会被当作普通注释忽略。弹窗代码将根据不同情况使用这两种特性,以实现代码只在需要进行升级提示的IE版本中加载,其他浏览器不加载。

关于双核浏览器的兼容问题

请在 <head> 后弹窗代码前添加如下代码,有了如下代码,内置 Chromium 和 IE 双核的浏览器会优先使用 Chromium 内核,IE也会优先使用最高内核,而非兼容模式。详细解释请参阅 旧版 Internet Explorer 淘汰行动 的代码解释。

需要注意的是,以下规定内核的代码并非总是有效,当你的域名是 gov.cn 或 edu.cn 结尾时,或当你的网页内容存在类似“IE9.0或以上浏览器访问达到最佳效果”的提示时,此代码将失效。

不过,正如前文所述,弹窗代码为双核浏览器用户提供了切换内核示意图,引导用户通过切换内核正常访问。查看效果截图

<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

可选配置

弹窗代码提供两个参数可供配置。一是决定用户关闭弹窗后多少分钟不再展示弹窗的 once 参数,不配置将不限制,用户每次打开或刷新页面都展示一次;二是决定从哪个IE版本开始提示升级的 outver 参数,最高是10,最低是6,默认是10,即IE10及更旧版IE都提示升级。

示例一。在IE10及更旧版IE提示升级,每次打开都提示升级:

<script>/*@cc_on 
var _iealwn = {once: 0, outver: 10};
document.write('\x3Cscript id="_iealwn_js" src="https://support.dmeng.net/ie-alert-warning/latest.js">\x3C/script>'); 
@*/</script>

默认配置就是 {once: 0, outver: 10},因此这个例子可以简写为:

<script>/*@cc_on document.write('\x3Cscript id="_iealwn_js" src="https://support.dmeng.net/ie-alert-warning/latest.js">\x3C/script>'); @*/</script>

示例二。在IE9及更旧版IE提示升级,每次打开都提示升级:

<!--[if lte IE 9]>
<script>var _iealwn = {once: 0, outver: 9};</script>
<script id="_iealwn_js" src="https://support.dmeng.net/ie-alert-warning/latest.js"></script>
<![endif]-->

示例三。在IE8及更旧版IE提示升级,每次打开都提示升级:

<!--[if lte IE 8]>
<script>var _iealwn = {once: 0, outver: 8};</script>
<script id="_iealwn_js" src="https://support.dmeng.net/ie-alert-warning/latest.js"></script>
<![endif]-->

示例四。在IE7及更旧版IE提示升级,每次打开都提示升级:

<!--[if lte IE 7]>
<script>var _iealwn = {once: 0, outver: 7};</script>
<script id="_iealwn_js" src="https://support.dmeng.net/ie-alert-warning/latest.js"></script>
<![endif]-->

重复弹窗配置

如配置解说所言,使用以上例子代码,用户点击关闭弹窗后,只要打开或刷新页面都会再次弹窗提示,因为 once 参数没有配置有效数值。如果不想弹窗太频繁,可以设置一个数值,例如3,那么,用户点击关闭弹窗后3分钟内无论是打开新页面还是刷新页面都不会再弹窗提示。

以下是一个例子:

<script>/*@cc_on 
var _iealwn = {once: 3, outver: 10};
document.write('\x3Cscript id="_iealwn_js" src="https://support.dmeng.net/ie-alert-warning/latest.js">\x3C/script>'); 
@*/</script>

这个功能的实现依赖 Cookie ,字段名为 _iealwn 。如用户浏览器禁止了 Cookie 功能则配置失效。

一个完整的HTML示例

以下例子使用默认配置,微软已经停止支持的IE10及更旧版IE都提示升级。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <script>/*@cc_on 
    document.write('\x3Cscript id="_iealwn_js" src="https://support.dmeng.net/ie-alert-warning/latest.js">\x3C/script>'); 
     @*/</script>
    <title>网页标题</title>
    <!-- 其他meta标签 -->
</head>
<body>
    <h1>网页内容</h1>
</body>
</html>

代码维护

当前弹窗代码已在 Windows XP IE6/IE7/IE8 和 Windows 7 IE8/IE9/IE10 环境下通过测试,均正常展示。但,由于多数双核浏览器在IE兼容模式时都不向 userAgent 添加标识,难以识别,双核浏览器切换内核示意图仅在 Windows 7 IE9/IE10 内核可全部通过测试,在 IE6/IE7/IE8 内核仅部分通过测试,更多检测方法仍在研究中,弹窗代码仍在持续完善中。代码及静态资源由阿里云CDN提供极速访问。

如有建议或BUG反馈请发送邮件到:

技术参考资料

本页最后更新于 2018年3月30日 17:53:13