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

转载于:https://www.cnblogs.com/flower-qh/p/10607395.html

如何给网站添加IE浏览器升级提示相关推荐

  1. Chrome浏览器安装插件提示“无法从该网站添加应用,拓展程序或脚本”解决办法

    最近在新电脑的Chrome上安装插件时遇到了"无法从该网站添加应用,拓展程序或脚本"问题 网上搜了一圈终于找到了解决方案,现在分享给大家 第一步  点击Chrome浏览器右上角三个 ...

  2. windows系统“IE浏览器将此网站添加兼容性视图”详细图文教程

    一.前言 电脑:windows10家庭版 IE浏览器版本:Microsoft Edge 83.0.478.45 二.问题: 小伙伴们在登录某些网站时可能会遇到这种情况,见下图. 提示:请使用IE10以 ...

  3. Chrome浏览器安装插件时报错“无法从该网站添加应用、扩展程序和用户脚本”解决办法

    在使用Chrome浏览器,安装插件的时候会出现"无法从该网站添加应用.扩展程序和用户脚本" 解决方法如下 第一步:首先添加一个新的标签页,输入:chrome://flags/#ex ...

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

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

  5. chromebook刷机_如何将网站添加到您的Chromebook架子上

    chromebook刷机 Bookmarks are great to keep your favorite sites nearby, but they aren't the fastest opt ...

  6. windows rt_如何在Windows RT上轻松将网站添加到Flash白名单

    windows rt Microsoft's Surface RT and other Windows RT-based machines include the Flash browser plug ...

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

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

  8. live2d 3行代码 为网站添加萌萌哒看板娘

    3行代码 为网站添加萌萌哒看板娘 看板娘是一种职业和习惯称呼,也是ACGN次文化中的萌属性之一.简而言之就是小店的女服务生,也有"吸引顾客,招揽生意,提高人气"等作用类似品牌形象代 ...

  9. 如何为你的网站添加标志性的图标(头像)呢?

    今天get到一个新的知识点,虽说不是什么复杂的东西,但是能实现效果还是蛮高兴的. 为网站添加标识性的的图标(头像)?也许有人像我一样,刚开始并不知道啥意思,但是看到别人网站都有标识性的头像,立马就明白 ...

最新文章

  1. java获取正则表达式_JAVA 正则表达式(获取)
  2. php获取表单信息的代码_PHP获取HTML文件名表单数据等
  3. 【插件发布】JAVA微服务框架,Jeecg-P3-Biz-OA 1.0.0 插件开源发布
  4. oracle清理trace、alert、aud、listener等日志文件
  5. layer 刷新某个页面
  6. SQL Server分页3种方案比拼[转]
  7. 【指纹识别】基于matlab GUI指纹识别【含Matlab源码 1353期】
  8. Web开发者的简历 模板
  9. 无人机飞控系统的简单分析
  10. 共享该文件当前不能用户此计算机,局域网共享常见问题解决汇集
  11. 详解CAN总线:CAN协议分层结构及功能
  12. 大学生搜题软件哪个好?2020搜题软件排行榜
  13. 【ROS】中级操作学习整理-TF坐标变换
  14. 基于SpringBoot+ Vue 音乐平台
  15. 接口技术七段数码管c语言,031 实例7-七段数码管绘制
  16. 如何通过photoshop制作保存*.ico的图标文件教程
  17. 单反相机风景摄影易记易学口诀
  18. CommandName属性和CommandArgument属性[转]
  19. Python123 期末题库
  20. julia的plot

热门文章

  1. 神秘贼掉包二维码,支付宝赔偿200多,烧烤小哥为何还骂支付宝没良心?
  2. 那些英年早逝的 IT 劳模们
  3. 很牛的几篇圈内爆料——影视圈
  4. golang版google pay 支付验证
  5. 频域串联滞后校正matlab,基于MATLAB的串联超前校正、滞后校正和串联滞后-超前校正设计.pdf...
  6. [USACO 2010 Feb S]Chocolate Eating
  7. docker搭建mongodb高可用集群
  8. [数据科学]000.我为什么当数据科学家
  9. 海思Hi3516EV200开发第一天
  10. element步骤条实战