一个非常棒的 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. PHP中AJAX的使用（完整实例【大牛可飘过】）

    有一段时间不写关于AJAX的东西了,最近和同学参加个比赛,要做一个类似博客的东西,用到了AJAX的东西,在写东西之前为了再熟悉一下AJAX,自己做了个关于AJAX的小事例与大家分享一下. AJAX在j ...

  2. ERROR 1819 (HY000): Your password does not satisfy the current policy requirements

    为了加强安全性,MySQL5.7为root用户随机生成了一个密码,在error log中,关于error log的位置,如果安装的是RPM包,则默认是/var/log/mysqld.log. 一般可通 ...

  3. CRL 版本2.2.0.0发布

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

  4. iOS开发--AVFoundation自定义相机

    首先导入一个头文件 #import <AVFoundation/AVFoundation.h> 由于后面我们需要将拍摄好的照片写入系统相册中,所以我们在这里还需要导入一个相册需要的头文件 ...

  5. 1Z0-053 争议题目解析706

    1Z0-053 争议题目解析706 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 706.You execute the following command to set the ...

  6. Lucene.net初探

    引言 在分析同事开发的客户端搜索项目时注意到,搜索的关键是索引,而提到索引就不得不提Lucene.net,思路就是将需要搜索内容写入索引,客户端自己或局域网其他机器搜索时直接搜索索引,从而查看到你共享 ...

  7. OpenGL新手框架

    开始学习用OpenGL,也就想显示一些点,以为挺简单的,哎,看了两天才会画三维的点,做个总结. 使用OpenGL的基本流程 int main(int argv, char *argc[]) { //初 ...

  8. Struts2 源码分析——Action代理类的工作

    章节简言 上一章笔者讲到关于如何加载配置文件里面的package元素节点信息.相信读者到这里心里面对struts2在启动的时候加载相关的信息有了一定的了解和认识.而本章将讲到关于struts2启动成功 ...

  9. Extjs.FormPanel

    刚刚学习ExtJS ,备注一哈代码 防止忘记... <html xmlns="http://www.w3.org/1999/xhtml"> <head runat ...

  10. HTML中嵌入pdf的简单方法

    <embed src="> 或者你不想显示某些功能的话: <embed src=">