IE条件注释,嗅探低版本IE用户,并引导升级
一、科普IE条件注释
IE条件注释功能是条件注释是IE特有的一种功能,能对IE系列产品进行单独的XHTML代码处理,注意,主要是针对XHTML,而非CSS。条件注释功能非常强大,可以进行true和false判断。
最大好处:IE条件注释 属于微软官方给出的兼容解决办法而且还能通过W3C的效验。
上个栗子:
<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
语句的意思是:IE8浏览器下,引入my.css文件。其他版本IE浏览器,if判断为flase,则不引入。
关键词解释
lt :Less than的简写,小于。
lte :Less than or equal to的简写,小于或等于。
gt :Greater than的简写,大于。
gte:Greater than or equal to的简写,大于或等于。
!:不等于。
二、引导升级实现
1)嗅探低版本小于IE9的用户
<!--[if lt IE 9]>
// IE浏览器版本低于IE9的用户
<![endif]-->
2)强制跳转页面的js
<script type="text/javascript">
window.location.href = "http://"+ window.location.host +"/kill-IE.html";
</script>
3)双剑合并
<!--[if lt IE 9]>
<script type="text/javascript">
window.location.href = "http://"+ window.location.host +"/kill-IE.html";
</script>
<![endif]-->
三、优化升级
在实际使用场景中,用户升级浏览器后,可能会复制kill-IE.html的页面url进行第二次访问。
这就带来一个问题:用户怎么刷新,还是停留在kill-IE.html这个页面。
kill-IE.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>kill-IE</title>
</head>
<body>
<p>
<span>推荐浏览器:</span>
<a href="https://www.baidu.com/s?wd=chrome" title="谷歌" target="_blank" >Google浏览器</a>
</p>
</body>
</html>
解决方法:
kill-IE.html页面,判断当前浏览的是不是低版本浏览器,不是的话,自动跳转回访问之前的页面或者首页。
1)记录跳转kill-IE.html之前,所在页面的url
将url作为一个参数值,添加在跳转链接上
<!--[if lt IE 9]>
<script type="text/javascript">
(function(){
var _location = window.location;
_location.href = "http://"+ _location.host +"/kill-IE.html?url="+ encodeURIComponent(_location.href);
})();
</script>
<![endif]-->
2)修改kill-IE.html
修改kill-IE.html的处理逻辑,增加判断当前浏览器是否为低版本浏览器,如果不是低版本的浏览器,则不需要停留在当前页面。
跳转重定向解决方式:
获取当前href的url参数。
如果有,则进行跳转。
没有该参数,则默认跳转回主域名。
在线演示:https://wall-wxk.github.io/blogDemo/2017/01/20/kill-IE.html
模拟访问来源是百度:https://wall-wxk.github.io/blogDemo/2017/01/20/kill-IE.html?url=http%3A%2F%2Fwww.baidu.com
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>kill-IE</title>
<script>
var isGoodBrowser = true; // 默认标记为现代浏览器
</script>
<!--[if ltIE 9]>
<script>
isGoodBrowser = false; // 标记为需要升级的低版本浏览器
</script>
<![endif]-->
<script type="text/javascript">
(function(){
// 如果是低级版本浏览器,则不进行重定向跳转
if(!isGoodBrowser){
return;
}
var _location = window.location,
_search = _location.search.substring(1), // url参数
_jumpUrl = "http://"+_location.host, // 主域名
_params, // 参数集合
_item, // 单个参数
_result = "", // 最后得到的跳转url
_len;
// 抓取url参数
if(_search.indexOf("url") != -1){
_params = _search.split("&");
_len = _params.length;
while(_len){
_len -= 1;
_item = _params[_len];
if(_item.indexOf("url=") != -1){
result = _item.split("=")[1];
if(result.length > 0){
_jumpUrl = decodeURIComponent(result); // 转义回普通字符
}
break;
}
}
}
_location.href = _jumpUrl; // 跳转页面
})();
</script>
</head>
<body>
<p>
<span>推荐浏览器:</span>
<a href="https://www.baidu.com/s?wd=chrome" title="谷歌" target="_blank" >Google浏览器</a>
</p>
</body>
</html>
完美解决! _ Y
阅读原文:http://www.jianshu.com/p/0342c7ca3a15
IE条件注释,嗅探低版本IE用户,并引导升级的更多相关文章
- HTML条件注释判断浏览器版本命令
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![ ...
- 通过HTML条件注释判断IE版本的HTML语句详解<!--[if IE]> <![endif]-->
我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: <!--[if ! ...
- 条件注释判断IE版本
在学习Bootstra的时候看到这么一句话, <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media ...
- 条件注释判断浏览器版本<!--[if lt IE 9]>
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![e ...
- 条件注释判断浏览器版本<!--[if lt IE 9]>(转载)
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![ ...
- html 条件注释判断浏览器版本<!--[if lt IE 9]>
<!--[if lte IE 8]><script>window.location.href='http://support.dmeng.net/upgrade-your-br ...
- zencart低版本由php5.2.17升级PHP5.3环境下错误及解决方案
方法:有错误或者空白先打开错误提示,ftp看cache错误日志 或者 面板查看错误日志,再对比数据库是否正确,可拿脚本看是否能连接 \cp -r backipmysql/nlbarb_007li/ ...
- 关于IE条件注释(译)
本文翻译自此篇文章.翻译纯属业余. 许多网站为了确保他们的站点能够在不同的浏览器上有不同的显示效果而使用特征检测,一些传统的网站使用其他技术,诸如在服务器或客户端上使用脚本去检测浏览器类型.在这里我们 ...
- HTML中的Hack手段之条件注释
通常WEB的好处就是可以跨平台,但这个世界偏偏有个另类,就是IE浏览器.在平常做HTML设计时,有时需要为IE的表示差异而不得不使用一些Hack手段.条件注释就是这类手段之一. 条件注释是IE浏览器的 ...
随机推荐
- Linux Kernel的Makefile与Kconfig文件的语法
https://www.kernel.org/doc/Documentation/kbuild/kconfig-language.txt Introduction ------------ The c ...
- POJ 1579-Function Run Fun(内存搜索)
Function Run Fun Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 16503 Accepted: 8514 ...
- Android控件RecyclerView与ListView的异同
在我的一篇介绍Android新控件RecyclerView的博客(Android L新控件RecyclerView简介)中,一个读者留言说RecyclerView跟ListView之间好像没有什么不同 ...
- Javascript技巧实例精选(5)—显示当前的日期和时间
用Javascript实现在屏幕中打印当前的日期和时间 >>点击这里下载完整html源码<< 这是显示的效果 目前的日期/时间是:Wed Sep 25 2013 23:40:0 ...
- 4 MySQL与PHP连接
目录: 1. 连接概述2. 创建php文件进行MySQL连接3. 查看连接效果 1. 连接概述 上文讲述了LAMP开发模型,并且使用AppServ进行安装.这时候就要体现优势了.本节将介绍在直接使用P ...
- python int异常 python isdigit
python int是python把任何类型转换成int类型的方法,但是你如果运用不好的话,会引发异常,但是python的str字符串转换方法运用起来倒是比较安全,它把任何对象转换成字符串类型都不会报 ...
- CentOS安装Python教程
下载/安装python yum install -y bzip2* #nodejs 0.8.5需要,请安装python前,先安装此模块. wget http://www.python.org/ft ...
- NuGet的本地服务器安装与Package的发布
NuGet的本地服务器安装与Package的发布 主要的步骤是按照下面的例子来做的: NuGet学习笔记(1)——初识NuGet及快速安装使用 NuGet学习笔记(2)——使用图形化界面打包自己的类库 ...
- Object-c学习之路二(oc内存管理黄金法则1)
今天看了看oc的内存管理,自己管理内存不能随便的release和retain 法则会出现野指针等错误.下面以人和读书的例子做练习. 1.主函数 // // main.m // MemoryManage ...
- 用来代替本机IP的万能IP:127.0.0.1
用来代替本机IP的通用IP:127.0.0.1