如何给不支持新特性的浏览器打补丁

一个非常棒的 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>

搞定。现在,浏览器缺失的新功能都会通过相关补丁脚本被自动追加进来了。

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

时间: 2024-11-08 22:00:02

如何给不支持新特性的浏览器打补丁的相关文章

HTML5表单、一些新增的输入类型以及为不支持新特性的浏览器提供解决方案

我们先来看一下这么样一个表单: 一.一步一步来分析下代码: 1 <form id="redemption" method="post"> 2 <hgroup> 3 <h1>Oscar Redemption</h1> 4 <h2>Here's your chance to set the record straight: tell us what 5 year the wrong film got nomin

html5 css3表单新特性

2如何给不支持新特性的浏览器打补丁1 2如何给不支持新特性的浏览器打补丁1Modernizr补丁下载 <!DOCTYPE html> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="

不支持html5表单验证新特性的解决方案

下载 Alexander Farkas编写的“Webshims Lib”(http://afarkas.github.com/webshim/demos/)它可用于插入表单补丁(也可以为其他 HTML5特性打补丁),从而使不支持新特性的浏览器可以处理 HTML5 表单. 使用方法: a.下载 Webshims Lib(http://github.com/aFarkas/webshim/downloads)并解压: b.将其中的 js-webshim 文件夹复制到相应的位置: <script sr

使用Modernizr探测HTML5/CSS3新特性

HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level.这些新技术允许我们只用HTML,CSS和JavaScript 就可以构建包括在平板和移动设备上能够运行的多样化表单页面.HTML5虽然提供了很多新特性,但是如果我们不考虑旧版本的浏览器就是用这些新技术也不太 现实,老版本浏览器已经使用了很多年,我们依然需要考虑这些版本的兼容性问题.本文要解决的问题就是:在我们使用HTML5/CSS3技术的时候,如何更

Atitit js es5 es6新特性 attilax总结

1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 基本chrome ff 360se8全面支持了2 2. ECMAScript 2015(ES6)的十大特征 – WEB前端开发 - 专注前端开发,关注用户体验.html2 1.1. JavaScript发展时间轴: 1.1995:JavaScript诞生,它的初始名叫LiveScript. 2.1997:ECMAScript标准确立. 3.1999:ES3出

Atitit.业务系统的新特性&#160;开发平台&#160;新特性的来源总结

Atitit.业务系统的新特性 开发平台 新特性的来源总结 1.1. 语言新特性(java c# php js python lisp c++ oc swift ruby  go dart1 1.2. 流行lib.frmawork  新特性 jdk clr framework 新特性 (jq   Servlet2 1.3. Ide 新特性( eclipse vs netbea jetbrain2 1.4. Vm  新特性 clr  jvm(jvm好像没有独立的版本号,继承在jdk里面2 1.5.

【HTML5】如何处理HTML5新标签的浏览器兼容版问题

HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在低级浏览器中也得到有限的支持,不至于影响整个的页面功能. 让浏览器识别HTML5规范中的新标签 IE8浏览器中还没有添加对HTML5新标签的支持,所以在IE8中无法直接展现HTML5新标签中的内容.庆幸的是IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以

关于IE9浏览器正式版新特性的一些疑问解答

很多朋友使用IE9浏览器后,出现各式问题.以下是IE9浏览器正式版新特性的一些疑问解答, 希望对你有所帮助. 1.IE9 RTM支持迅雷等下载软件的调用么? 答:在最早推出IE9 Beta和RC版本的时候,早期版本的迅雷7等下载软件可能会碰到崩溃问题出现,但是他们的更新速度还是很频繁的,官方会放出适合IE9 RTM的新版本,也建议大家更新迅雷到官方最新版本.下载软件都会自动关联到IE默认下载行为的. 2.为什么每次启动总是多个主页选项卡,显示什么IE9尽享网络之美?还跳出一个提示来,总是关不掉么

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

新特性: 1. 拖拽释放(Drag and drop) API 2. 语义化更好的内容标签(header,nav,footer,aside,article,section) 3. 音频.视频API(audio,video) 4. 画布(Canvas) API 5. 地理(Geolocation) API 6. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失: 7. sessionStorage 的数据在浏览器关闭后自动删除 8. 表单控件,calendar.date