一个非常棒的 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. IOS开发之新浪围脖

    IOS开发和Web开发一样,网络请求方式包括Get和Post方式.Get和Post两者有和特点和区别,在本篇博客中不做过多的论述,本篇的重点在于如何GET数据和POST数据.下面还会提到如何在我们的项 ...

  2. csapp2e-chapter2-homework

    一 前言 看了csapp2e第二章,感觉讲的很透彻,理解了一些以前学组成原理没有学懂的东西.这章最让我感觉深刻的还是计算机是怎么实现c语言中的基本数据类型的表示和操作的,这对程序员理解程序无疑是帮助巨 ...

  3. geotrellis使用（十九）spray-json框架介绍

    Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 spray-json简介 spray-json使用 ...

  4. php这是一个随机打印输出字符串的例子

    <?php header("Content-type:text/html;charset='utf8'"); error_reporting(E_ALL); define(& ...

  5. grape动态PHP结构（三）——API接口

    一.app视图与控制器

  6. 相克军_Oracle体系_随堂笔记014-锁 latch,lock

    1.Oracle锁类型 2.行级锁:DML语句 3.表级锁:TM 4.锁的兼容性 5.加锁语句以及锁的释放 6.锁相关视图 7.死锁 1.Oracle锁类型 锁的作用     latch锁:chain ...

  7. Xenocode Postbuild 2010 for .NET 使用说明

    文章转载自网络 用法一: .导入要加密的dotNET程序或assembly文件(.dll/.exe) .选择第二个选项卡“Protect” .点击“Select Pattern” .选中所有“Obje ...

  8. 【C#】分享一个弹出容器层，像右键菜单那样召即来挥则去

    适用于:.net2.0+ Winform项目 ------------------201508261813更新(源码有更新.Demo未更新)------------------ 重新绘制调整大小手柄( ...

  9. ym—— Android网络框架Volley(体验篇)

    VolleyGoogle I/O 2013推出的网络通信库,在volley推出之前我们一般会选择比较成熟的第三方网络通信库,如: android-async-http retrofit okhttp ...

  10. javaweb学习总结(三十八)——事务

    一.事务的概念 事务指逻辑上的一组操作,组成这组操作的各个单元,要不全部成功,要不全部不成功. 例如:A——B转帐,对应于如下两条sql语句  update from account set mone ...