一个非常棒的 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. MySQL的分页优化

    今天下午,帮同事重写了一个MySQL SQL语句,该SQL语句涉及两张表,其中一张表是字典表(需返回一个字段),另一张表是业务表(本身就有150个字段,需全部返回),当然,字段的个数是否合理在这里不予 ...

  2. 【记录】ASP.NET MVC 4/5 Authentication 身份验证无效

    在 ASP.NET MVC 4/5 应用程序发布的时候,遇到一个问题,在本应用程序中进行身份验证是可以,但不能和其他"二级域名"共享,在其他应用程序身份验证,不能和本应用程序共享, ...

  3. mysql相关文章

    win7系统下如何配置php-Apache-mysql环境 Mac 可设置环境变量的位置.查看和添加PATH环境变量 Mac如何删除MySQL,Mac下MySQL卸载方法 mac+apache+php ...

  4. Java 线程池框架核心代码分析--转

    原文地址:http://www.codeceo.com/article/java-thread-pool-kernal.html 前言 多线程编程中,为每个任务分配一个线程是不现实的,线程创建的开销和 ...

  5. C语言 第四章 关系、逻辑运算与分支流程控制

    一.关系运算 若干表达式用关系运算符连接而成,就构成关系表达式. 关系表达式中,表达式成立,其值为1(真):表达式不成立,其值为0(假).其他表达式中,其结果如果是非0则为真,结果为0则为假. 关系运 ...

  6. 相克军_Oracle体系_随堂笔记004-shared pool

    本章主要阐述SGA中的shared pool. Shared pool { 1.free 2.library cache(缓存sql语句及其执行计划) 3.row cache(数据字典缓存) }   ...

  7. spring整合hibernate的详细步骤

    Spring整合hibernate需要整合些什么? 由IOC容器来生成hibernate的sessionFactory. 让hibernate使用spring的声明式事务 整合步骤: 加入hibern ...

  8. 轻量级OLAP(一):Cube计算

    有一个数据多维分析的任务: 日志的周UV: APP的收集量及标注量,TOP 20 APP(周UV),TOP 20 APP标注分类(周UV): 手机机型的收集量及标注量,TOP 20 机型(周UV),T ...

  9. Nop中的Cache浅析

    Nop中定义了ICacheManger接口,它有几个实现,其中MemoryCacheManager是内存缓存的一个实现. MemoryCacheManager: using System; using ...

  10. VS2012 C#使用/配置Log4Net

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精   本节探讨如何在VS2012中使用Log4Net 1. ...