HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 没有插件的网站一样可以很美

没有插件的网站一样可以很美

因为越来越多的浏览是在日益增多的设备以及这些设备自带的浏览器上发生的,越来越多的消费者正在没有插件的情况下浏览。向这些不使用插件浏览的消费者提供优秀的网站体验,是一项非常重要的工作,因为网站必须要面向最广泛的目标群体。利用HTML5,现代的浏览器和网站即使不用插件,也能提供优秀的消费者体验。
  “插件”泛指使用浏览器的底层接口运行本地客户端代码的浏览器扩展。例如,这里是Webkit方法的简单描述;在IE 里对应的就是ActiveX 控件和浏览器辅助对象(Browser HelperObject)。网站使用各种各样的插件,ActiveX 就是最常见的插件之一(为了让用户享受到更多更丰富的在线内容,微软将会和Adobe一起开发一款适用于Metro IE 的Flash 插件,但是其他插件不被支持)。

  1. 无插件浏览变得越来越普遍
  今天的许多Web浏览活动,都是在不支持“插件”的设备上发生的。支持插件的浏览器提供了许多不用插件的运行方式。例如Internet Explorer 9 就提供了ActiveX 筛选,其他浏览器则提供了控制插件的附件。虽然可以将插件编译为在64 位浏览器中运行,但许多开发人员只发布了在32 位浏览器中运行的版本,运行64 位浏览器是无插件浏览变得越来越普遍的另一原因:

a.png


  64 位Windows 同时包含32 位和64 位的IE

  2. 越来越好的浏览体验
  许多网站现在已经提供了插件不可用时的良好体验。例如,没有插件时(没有安装插件,如在64 位浏览器中,或者通过ActiveX 筛选禁用)用Internet Explorer 9 访问Hotmail 时工作得很好:

b.png


  IE9 没有插件时访问Hotmail 收件箱

  有些网站在使用无插件方式工作之前,需要使用者采取一些操作。例如,如果想在没有插件的情况下使用YouTube,需要先访问http://www.youtube.com/html5,并单击“Join theHTML5 Trial”(加入HTML5 试验):

c.png


  在IE9 中无插件时显示的YouTube;左侧是加入HTML5 试验之前,右侧是加入HTML5 试验之后;右侧的上下文菜单表明,视频使用HTML5 播放

  其他网站在禁用插件时,则屏蔽部分或全部功能。例如,MSNBC.com 和CNN.com 取消视频;Gmail 目前屏蔽禁用插件的Internet Explorer 9,因为它检查XHR ActiveX 对象,而不是使用从Internet Explorer 7 以来就一直可用的Web 标准的XHR。从Internet Explorer 7 之后,Web 已经有了很大发展,所以网站应该回头审视那些特定于旧版本浏览器或旧版本标准的代码。

d.png


  有些网站在没有插件时禁用部分或全部功能

  3. 功能检测,网站开发人员如何做得更好
  许多网站已经提供了在浏览器插件不可用时的优秀体验。但当网站根据用户使用的设备或浏览器提供这种体验的时候,用户有一个问题。例如,如果一台PC 上的浏览器发送某台设备的User-Agent 字符串,则MSNBC.com 视频可以在无插件的情况下播放,但在同一台机器同一浏览器上,如果发送不同的User-Agent 字符串,视频就无法播放:

e.png


  上图是MSNBC.com 在没有安装Flash 的Apple Safari 中的显示效果;右图是同一浏览器把自己标记为iPad时的显示效果

  如果开发人员使用功能检测和降级(fallback),而不是将网站硬编码到特定的浏览器和配置上,对用户会更好。例如,在没有插件的时候,检测并使用HTML5 视频,可以给用户提供更好的体验。许多网站在没有插件却要显示广告的时候,已经在做这种降级处理,证明这是一个实用而且具备伸缩性的解决方案。
  如果网站按照最佳做法,先测试基于标准的功能是否可用,然后只在必要的时候用插件进行降级,用户体验会更好。例如,下面分别使用XMLHttpRequest进行功能检测的良好模式和不良模式:

  1. // 不良模式:不要这样做!
  2. varxhr = window.ActiveXObject
  3. ? newActiveXObject("Microsoft.XMLHTTP")
  4. : newXMLHttpRequest();
  5. // 最佳做法:如果可用,使用本地XHR
  6. if (window.XMLHttpRequest) {
  7. // 如果是IE7+, Gecko, WebKit:使用本地对象
  8. varxmlHttp = new XMLHttpRequest();
  9. }
  10. else if (window.ActiveXObject) {
  11. // ...如果不是,尝试ActiveX 控件
  12. varxmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  13. }
  14. else {
  15. // 没有XMLHTTPRequest机制可用。
  16. }
复制代码
  优雅地降级到其他内容,对于避免为消费者造成不佳体验非常重要。例如,在没有AdobeFlash 的时候,Gmail 视频聊天会优雅降级。有些网站只根据User Agent 字符串或其他特定于浏览器的属性提供降级。这种短期解决方案无法适应浏览器和用户浏览方式的变化。构建一个应用程序是有些网站(例如IMDB.com)对浏览器不支持扩展项的设备所采用的另一种解决方案。User Agent 字符串已经不再是决定应该提供哪个HTML 和脚本的可靠或健壮的方式了。

  HTML5 的能力使得消费者可以在更多设备、更多配置上体验当今的Web。对于Web 开发人员来说,这意味着有更多机会可以让用户访问他们的网站,使得他们更有动力让网站在没有插件的情况下也有出色的表现。来看一下微软针对开发者推出的IE10兼容性白皮书吧,介绍了更多的HTML5和IE10内容,相信你会获得很多帮助,下载地址:http://vdisk.weibo.com/s/bKgeq

【没有插件的网站一样可以很美】相关文章

1. 没有插件的网站一样可以很美

2. 最好的HTML5商业网站 没有之一

3. 移动开发跨平台之争:HTML5只是看上去很美?

4. JavaScript 6看上去很美

5. 微软:无插件的Web环境会更好

6. 10个 jQuery 插件用于在你的网站中实现数据可视化

7. 没有中国 苹果向第二批国家发售iPhone 4S

8. HTML 5在移动端有没有未来?

9. Mozilla布道师:HTML5在移动端有没有未来?

10. TaggingJS – 可以灵活定制的jQuery标签系统插件

本文来源:https://www.51html5.com/a2942.html

点击展开全部

﹝没有插件的网站一样可以很美﹞相关内容

「没有插件的网站一样可以很美」相关专题

其它栏目

也许您还喜欢