1.在代码编辑器中(如Notepad++)打开网站头部模板

2.使用<!––[if IE]>语句添加升级提示,如:

判断是否IE(包含使用IE内核的浏览器)

<!––[if IE]>你正在使用的是IE浏览器<![endif]––>

判断当前浏览器是否某个IE版本,以下例子是指等于IE6。如果我们要特指IE7则把 if IE 6 改成 if IE 7 即可,以此类推。

<!––[if IE 6]>你使用的是IE6浏览器,这是IE的过期版本,是时候升级了!<![endif]––>

判断当前浏览器是否IE浏览器以及小于等于某个版本,以下例子是指小于等于IE8。如果要指小于等于 IE 9 则把 if lte IE 8 改为 if lte IE 9 即可。

<!--[if lte IE 8]>这段文字只会在IE8及(IE7/IE6/IE5等)以下版本显示<![endif]-->

需要注意的是,if IE 语句只支持到 IE 9 ,要判断 IE10 需要使用JS语句。

3.应用实例(使用方法:添加在网站头部代码</head>之前)

IE8及以下版本提示升级

<!--[if lte IE 8]><script>window.location.href='http://support.dmeng.net/upgrade-your-browser.html?referrer='+encodeURIComponent(window.location.href);</script><![endif]-->

IE9及以下版本提示升级

<!--[if lte IE 9]><script>window.location.href='http://support.dmeng.net/upgrade-your-browser.html?referrer='+encodeURIComponent(window.location.href);</script><![endif]-->

IE10及以下版本提示升级(方法一,@cc_on 是 IE10 及更旧版IE特有的条件编译语句,因此可以用来判断是否除 IE11 的其他IE版本。推荐此方法,但需要注意,如使用自动过滤注释,要确认升级代码有没有被误删)

<script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>

IE10及以下版本提示升级(方法二,判断UA)

<script>if (navigator.appVersion.match(/MSIE [0-9]+/)) window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); </script>

4.值得注意的是,国产浏览器往往内置Chromium(即谷歌浏览器内核)和IE双内核,我们可以使用头部代码令其调用先进的Chromium内核,给用户更优质的访问效果。

这个代码需要添加在IE升级代码前面,如下所示:

<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 window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>

升级提示弹窗代码

上文介绍的代码是是跳转到浏览器升级提示页的代码,这并不能适用所有业务场景。例如有的网站以文字内容为主,虽然在旧版ie中内容错版,但是依然可以勉强浏览,针对这种情况,我们可以使用弹窗代码,实现在不跳出本站的前提下为用户提供浏览器升级提示。

1.弹窗代码用法(将以下代码添加在 <head> 之后):

在IE8及更旧版IE提示升级:

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

在IE9及更旧版IE提示升级:

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

在IE10及更旧版IE提示升级:

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

一个完整的HTML示例:

<!DOCTYPE html>

<html>

<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="//support.dmeng.net/ie-alert-warning/latest.js">\x3C/script>'); @*/</script>

    <title>网页标题</title>

    <!-- 其他meta标签 -->

</head>

<body>

    <h1>网页内容</h1>

</body>

</html>

案例二:讲以下代码放在<head> 之后

<!--IE 9及以下升级提示-->
<!--[if lte IE 9]>
<script>
var str = "<p style='font-size:24px;;'>您的浏览器版本过低!</p>";
var str2 = "推荐使用:<a href='https://www.baidu.com/s?ie=UTF-8&wd=%E8%B0%B7%E6%AD%8C%E6%B5%8F%E8%A7%88%E5%99%A8' target='_blank' style='color:blue;'>谷歌</a>," +
"<a href='https://www.baidu.com/s?ie=UTF-8&wd=%E7%81%AB%E7%8B%90%E6%B5%8F%E8%A7%88%E5%99%A8' target='_blank' style='color:blue;'>火狐</a>," +
"其他双核极速模式";
document.writeln("<div style='text-align:center;color:#fff;background-color:#ccc; height:100%;border:0;position:fixed;top:0;left:0;width:100%;z-index:1234'>" +
"<h2 style='padding-top:200px;margin:0'><strong>" + str + "<br/></strong></h2><h2>" +
str2 + "</h2><h2 style='margin:0'><strong>如果你的使用的是双核浏览器,请切换到极速模式访问<br/></strong></h2></div>");
document.execCommand("Stop");
</script>
<![endif]-->

参考:https://jingyan.baidu.com/article/39810a23e5f483b637fda642.html

如何给网站添加IE浏览器升级提示的更多相关文章

  1. 为网站添加IE6升级提示

    原文 为网站添加IE6升级提示 IE6的是一款横跨十年的浏览器,作为一枚前端,对其已经失望透顶,但其在中国的市场比仍旧很高,中国大量的PC上安装的都是盗版Windows XP,而Windows XP上 ...

  2. win2003浏览器提示是否需要将当前访问的网站添加到自己信任的站点中去

    Win2003的操作系统,的确比其它操作系统在安全上增加了不少,这是为用户所考虑的.当然,既然提供了安全性,尤其是在上网的时候,可以禁止某些活动脚本的显示,这样,就可以多方面的避免在使用Win2003 ...

  3. 将网站添加到iPhone的主屏幕上

    我之前有篇文章介绍过如何将网站固定到Windows的开始菜单,并可以自定义图标.颜色以及Windows推送通知,其实Apple也有类似的功能,通过在网页的head部分添加link标记,在Safari浏 ...

  4. 网站添加到IIS和附件进程调试(新手使用篇)

    一.网站添加到IIS 做网站开发,很有必要把项目添加到IIS中,这对浏览和后期的调试很有帮助.怎么把网站添加到IIS上? 1). 打开IIS,然后操作步骤如下图: 选择Default Web Site ...

  5. sharepoint 2013 文档库 资源管理器打开报错 在文件资源管理器中打开此位置时遇到问题,将此网站添加到受信任站点列表,然后重试。

    我们在使用sharepoint 2013的文档库或者资源库的时候,经常会需要用到使用“资源管理器”来管理文档,但是有时候,点击“使用资源管理器打开”,会提示如下错误: 在文件资源管理器中打开此位置时遇 ...

  6. 【转】给网站添加X-UA-Compatible标签

    X-UA-Compatible是神马? X-UA-Compatible是IE8的一个专有<meta>属性,它告诉IE8采用何种IE版本去渲染网页,在html的<head>标签中 ...

  7. 网站添加logo图片

    网站添加log图片 第一种方法 这里使用的图片一般为16*16大小的图片 <link rel="shortcut icon" href="http://xxx.xx ...

  8. 如何为自己的网站添加HTTPS服务

    如何为自己的网站添加HTTPS服务,针对单个域名而言的,下面介绍网站添加https方法,拿阿里云方法 1.准备证书文件 进入阿里云管理控制台-安全-证书服务点击购买证书服务,进入证书购买页面(放心,我 ...

  9. 网站添加第三方登陆(PHP版)

    这两周正在写毕业设计,我做的是一个问答网站.先介绍一下这个网站:这是一个关于大学生在线问答的网站,类似知乎和百度知道,不过功能没有人家多,毕竟这个网站我一个人在做.网站部署在阿里云,网站包括API,W ...

随机推荐

  1. re模块 - 正则表达式 疏理(一)

    在网上总是很难找到令自己比较满意的,关于正则表达式的文章.所以决定自己来总结一波,并配上相应的示例. 正则表达式:定义了规则,用来字符串处理. 用途: 1.匹配 - 符合规则的字符串,则认为匹配了. ...

  2. $HOME

    Ubuntu中 命令行输入$HOME bash: /home/XXX: Is a directory $HOME 是用户主目录

  3. vs2013、vs2015使用.net4.5框架智能提示英文转成中文

    安装完VS2013.VS2015使用.net framework 4.5框架时,代码补全中智能提示信息全是英文解决方案:关闭VS2013.VS2015:将zh-Hans 目录替换以下目录 C:\Pro ...

  4. 关于VC预定义常量_WIN32,WIN32,_WIN64等预定义宏的介绍(整理、转载)

    参考帖子: (1)MSDN上专门讲预定义宏:https://msdn.microsoft.com/en-us/library/b0084kay(v=vs.80).aspx (2)VS中属性页的配置介绍 ...

  5. patch 28729262

    打补丁最后出个error OPatch found the word "error" in the stderr of the make command.Please look a ...

  6. WPF 10天修炼 第九天 - 几何图形

    几何图形 使用LineGeometry.RectangleGeometry.EllipseGeometry对象分别绘制直线.矩形.椭圆. 使用GeometryGroup可以绘制组合图形. <Wi ...

  7. 那什么时候会触发BFC呢?块级格式化上下文

    <html>根元素: float的值不为none: overflow的值为auto.scroll或hidden: display的值为table-cell.table-caption和in ...

  8. Maven Install报错:Perhaps you are running on a JRE rather than a JDK?

    我用的是idea,解决办法是:安装jdk,配置环境变量

  9. c博客作业--分支、顺序结构

    1.本章学习总结 1.1思维导图 1.2本章学习体会及代码量学习体会 1.2.1学习体会 对于本章学习我感觉对代码有了初步的了解,一些简单的题目可以熟练掌握,但现在解决一道题目花的时间过多,不易发现那 ...

  10. BLO(bzoj1123)

    Description Byteotia城市有n个 towns, m条双向roads. 每条 road 连接 两个不同的 towns ,没有重复的road. 所有towns连通. Input 输入n和 ...