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

发布日期:2015-09-15 16:50:02
前面把 HTML5表单的功能吹上了天, 但要想实际使用则还有两个非常麻烦的问题: 一是支持表单新特性的浏览器在具体实现上有所不同;二是对完全不支持新特性的浏览器如何处理。万幸的是,Web社区一如既往地拿出了解决办法。
由 Alexander Farkas编写的“Webshims Lib”就是构建于 Moderniz和无处不在的 jQuery之上的,它可用于插入表单补丁(也可以为其他 HTML5特性打补丁) ,从而使不支持新特性的浏览器可以处理 HTML5 表单。最值得称道的一点是,它利用了Modernizr 的加载功能,能做到只加载实际所需的补丁。如果在原生支持 HTML5 新特性的浏览器中查看网页,则仅会给网页加入一丁点儿冗余代码。而对于老版本浏览器,虽然它们需要加载更多的代码(因为它们本身能力不足) ,但通过相关 JavaScript 方法的辅助,它们能提供基本一致的用户体验。
通过打补丁受益的不仅仅只是老版本浏览器。我们知道,现在的很多浏览器也没有完全实现 HTML5 的表单特性。在网页中引入 Webshims Lib 可以弥补这些浏览器的缺陷。例如在 Safari中,提交一个必填项为空的 HTML5表单时不会有任何警告信息。其实这个表单根本不会提交, 但它也没给用户任何反馈, 这一点都不人性化。 在页面中引入 WebshimsLib 后,上述问题会得到弥补:
当 Firefox(v9)无法给 type="number" 属性提供控制按钮的时候,Webshims Lib 也可以提供一个合理的 jQuery 解决方案。总之,它是一个好用的工具,建议你立即下载这个小巧的工具包,然后在页面中使用,这样我们就可以继续编写 HTML5表单,而所有用户都可以放心地看到他们需要的表单了(不包括使用 IE 6 且禁用 JavaScript 功能的那两个
人——你知道我在说谁——快别这么干了! ) 。
首先下载 Webshims Lib并解压。然后将其中的 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库文件
<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>
搞定。现在,浏览器缺失的新功能都会通过相关补丁脚本被自动追加进来。太棒了!

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计