一个非常棒的 JavaScript 框架叫做 Modernizr（http://www.modernizr. com），用于向缺少 HTML5/CSS3特性支持的浏览器打补丁。由 Alexander Farkas编写的
“Webshims Lib”（http://afarkas.github.com/webshim/demos/）就是构建于 Moderniz和无处 不在的 jQuery之上的，它可用于插入表单补丁（也可以为其他 HTML5特性打补丁），从
而使不支持新特性的浏览器可以处理 HTML5 表单。最值得称道的一点是，它利用了 Modernizr 的加载功能，能做到只加载实际所需的补丁。如果在原生支持 HTML5 新特性
的浏览器中查看网页，则仅会给网页加入一丁点儿冗余代码。而对于老版本浏览器，虽 然它们需要加载更多的代码（因为它们本身能力不足），但通过相关 JavaScript 方法的辅
助，它们能提供基本一致的用户体验。 通过打补丁受益的不仅仅只是老版本浏览器。我们知道，现在的很多浏览器也没有完全
实现 HTML5 的表单特性。在网页中引入 Webshims Lib 可以弥补这些浏览器的缺陷。例 如在 Safari中，提交一个必填项为空的 HTML5表单时不会有任何警告信息。其实这个表
单根本不会提交，但它也没给用户任何反馈，这一点都不人性化。在页面中引入 Webshims
Lib 后，上述问题会得到弥补：
 
 
首先下载 Webshims Lib（http://github.com/aFarkas/webshim/downloads）并解压。然后将
其中的 js-webshim 文件夹复制到相应的位置。为简便起见，本例中我将其拷贝到网站的
根目录，然后在页面的 <head> 部分加入如下代码：
<script src="js/jquery-1.7.1.js"></script>
<script src="js-webshim/minified/extras/modernizr- custom.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
 
<script>
//加载补丁
$.webshims.polyfill();
</script>
分析一下这段代码。首先引入了一个本地的 jQuery库文件（可以在 www.jquery.com上下
载最新版本）：
<script src="js/jquery-1.7.1.js"></script>
接着，又引入了 Webshims Lib所包含的 Modernizr以及补丁相关的 JavaScript文件：
<script src="js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
最后，使用初始化脚本来加载所需的补丁：
<script>
//加载补丁
$.webshims.polyfill();
</script>
搞定。现在，浏览器缺失的新功能都会通过相关补丁脚本被自动追加进来了。
 
 
 

转载请注明出处！

http://www.cnblogs.com/libingbin/

感谢您的阅读。如果文章对您有用，那么请轻轻点个赞，以资鼓励。

如何给不支持新特性的浏览器打补丁(让老版本IE兼容新特性)的更多相关文章

  1. atitit.js 各版本 and 新特性跟浏览器支持报告

    atitit.js 各版本 and 新特性跟浏览器支持报告 一个完整的JavaScript实现是由以下3个不同部分组成的 •核心(ECMAScript)--JavaScript的核心ECMAScrip ...

  2. ECMAScript和JavaScript的区别，ECMAScript发展更新历史，ECMAScript5和ECMAScript6的新特性及浏览器支持情况，ECMAScript 5/ECMAScript 2015正式发布

    ECMAScript和JavaScript的区别 ECMA是European Computer Manufacturers Association的缩写,即欧洲计算机制造商协会.欧洲计算机制造商协会是 ...

  3. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  4. HTML5 的新特性以及新标签的浏览器兼容问题

    新特性: HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加. 1)  拖拽释放(Drag and drop) API 2)  语义化更好的内容标签(heade ...

  5. html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

  6. HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容性问题？如何区分HTML和HTML5？

    HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画canvas: 用于媒介回放的video和audio元素: 本地离线存储localStorage长期存储数据 ...

  7. 4. CSS新特性之浏览器私有前缀

    1. 浏览器私有前缀 浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无需添加 -moz-:代表firefox浏览器私有属性 -ms-:代表ie浏览器私有属性 -webkit-:代表safar ...

  8. 第四节：教你如何快速让浏览器兼容ES6特性

    写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节前端君会介绍一个抱砖引玉的操作案例. 为什么ES6会有兼容性问题? 由于广大用 ...

  9. 解决浏览器兼容ES6特性

    为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...

随机推荐

  1. JavaSE高级之GUI编程

    下面主要用到了java中的swing进行界面设计,当然java的GUI不如C#的设计的好看,不过原理还是要会的. 1． GUI Graphical User Interface 用户图形界面 a) 主 ...

  2. Android APK签名

    一.为什么要签名? 开发Android的人这么多,完全有可能大家都把类名,包名起成了一个同样的名字,这时候如何区分?签名这时候就是起区分作用的. 由于开发商可能通过使用相同的Package Name来 ...

  3. CRL 版本2.2.0.0发布

    重要更新: 增加了关联查询 优化了缓存查找效率 关联查询有以下两种形式 返回Select结果,结果为动态对象 将结果附加给当前对象索引值 关联查询有累加效果,可关联多个表可通过匿名对象指定返回的别名, ...

  4. 关于MVC EF架构及Repository模式的一点心得

    一直都想写博客,可惜真的太懒了或者对自己的描述水平不太自信,所以...一直都是不想写的状态,关于领域驱动的东西看了不少,但是由于自己水平太差加上工作中实在用不到,所以一直处于搁置状态,最近心血来潮突然 ...

  5. 利用private font改变PDF文件的字体

    利用private font改变PDF文件的字体 前几天做项目,需要使用未安装的字体来改变PDF的文件.以前并没有实现过类似的功能,幸运的是我在网上找到了类似的教程,并成功实现了这个功能. 下面就跟大 ...

  6. 微软的坑：Url重写竟然会引起IIS内核模式缓存不工作

    万万没有想到!当初为了解决使用负载均衡时记录客户端IP地址的问题,在IIS URL Rewrite Module中增加了一条URL重写规则(详见迁入阿里云后遇到的Request.UserHostAdd ...

  7. 重温JSP学习笔记--与日期数字格式化有关的jstl标签库

    上一篇笔记写的主要是JSTL的core标签库,如果想对一些数字或者日期做一些操作或者在网页上显示指定格式的数字或日期,jstl还提供了另一个fmt标签库,这里简单介绍一下: 第一步,导入标签库: &l ...

  8. 记一次由于Java泛型类型擦除而导致的问题，及解决办法

    中所周知,Java中的泛型并不像C++.C#一样是真正的泛型,其泛型是通过类型擦除来实现的.具体什么是类型擦除,可以参看这篇博文:http://icyfenix.iteye.com/blog/1021 ...

  9. android防止内存溢出浅析

    Android的虚拟机是基于寄存器的Dalvik,它的最大堆大小一般是16M.但是Android采用的是Java语言编写,所以在很大程度上,Android的内存机制等同于Java的内存机制,在刚开始开 ...

  10. mybatis入门基础(三)----SqlMapConfig.xml全局配置文件解析

    一:SqlMapConfig.xml配置文件的内容和配置顺序如下 properties(属性) settings(全局配置参数) typeAiases(类型别名) typeHandlers(类型处理器 ...