为无插件浏览做准备

从 Windows 8 开始,IE 是一种 Web 平台,它提供两种浏览体验:在针对触摸设备优化的全新 Windows UI 中提供新 IE;为桌面提供传统的 Internet Explorer 浏览体验。作为一种 Windows 应用,Internet Explorer 在无插件的情况下运行,以便为你提供干净、快速和安全的 Web 浏览体验,同时它还提供了一个本机 Adobe Flash 播放器。Web 开发人员通过从其站点中删除插件依赖关系并改为选择基于相似标准的技术,可以受益于更好的站点互操作性和更方便的维护。 在这里,我们提供了有关为 IE 中的无插件浏览准备站点和 Web 应用程序的指导和策略。

插件和现代 Web

浏览器插件是经过编译的第三方软件组件,它们通过调入低级浏览器界面来扩展 Web 内容的功能。在 Internet Explorer 中,插件采用 ActiveX 对象和 浏览器帮助程序对象 (BHO) 形式。如今 Web 上最常用的两种插件是 Flash Player 和 Skype Click to Call,Internet Explorer 会将它们分别作为 Microsoft ActiveX 对象和浏览器帮助程序对象 (BHO) 进行安装。其他常见的浏览器插件技术包括 Microsoft Silverlight、Apple QuickTime 和 Java 小程序。与 Flash 一样,这些技术为 Web 开发人员提供用来编写插件的应用程序框架和运行时,这些插件可扩展 Web 开发人员的站点和 Web 应用程序的功能。

从早期的 Web 历史记录开始,浏览器插件就扮演着重要的角色,通过它能够实现丰富的在线多媒体体验和复杂的 Web 应用程序功能。但是,插件连同这些功能都具有一些缺点。由于插件从本质上是在浏览器内部运行的应用,因此它们会占用额外的系统资源,还有可能会带来额外攻击面的安全风险。而且,插件不是为触摸设计的,由于它们是独立于浏览器本身的应用,因此,当 Internet Explorer 10 和更高版本进行了使网站通过触摸顺利工作的更改时,插件不会因此而有所改进。 最后,插件基于专利技术编写而且具有变量代码质量,这使其很难预测或控制它们对不同浏览器和操作系统的支持。

幸运的是,Web 自出现以来发展了很长时间,而且基于标准的技术指定了万维网联合会 (W3C),就如同包含 HTML5 的技术为各种插件提供相似的功能一样。这些技术对于不同的现代 Web 浏览器提供强大的支持,这样,Web 开发人员就有可能编写同一个跨所有的现代浏览器工作的标记和脚本,而无需编写或维护任何具有第三方框架和运行时依赖关系的额外代码。

从本质上,基于标准的无插件网站会为以下人员和内容带来好处:

  • 消费者 — 能够获得更佳的浏览体验、更长的移动设备电池寿命,以及增强的安全性、隐私和可靠性;
  • Web 开发人员 — 能够与不同的浏览器和设备进行更广泛的站点互操作、更好的前向兼容性和更方便的总体站点维护;
  • 现代 Web — 能够提升和填充更开放的、可访问而且与供应商无关的 Web。

基于这些原因,Windows 8 中的 IE 提供无插件的体验,全世界数量日益增加的顶级站点也是如此。已经有相当多的消费者设备和这些设备上的浏览器不支持插件。尽管有这样的趋势和好处,一些消费者站点和行业 Web 应用程序可能仍需要插件。本文的最后一部分讨论回滚技术和缓解策略,这些技术和策略可帮助用户方便地切换到适用于桌面版的 Internet Explorer 以查看与插件相关的站点。

获得无插件体验

Windows Internet Explorer 9 和更高桌面版本的 IE 还提供了一种使用 ActiveX 筛选查看无插件 Web 的方法。由于 Windows 8 中的 IE 以无插件形式运行,因此它提供了绝佳的测试平台,通过该平台可以开发新的无插件站点并将与插件相关的站点转换为使用标准技术。

下表概述了插件最常见的用法、基于传统插件的技术示例,以及 Internet Explorer 10 和更高版本中基于标准的等效技术。

功能基于插件的技术示例基于标准的等效技术 详细信息
视频和音频Flash、Apple QuickTime、SilverlightHTML5 视频 音频 视频音频
图形Flash、Apple QuickTime、Silverlight、Java 小程序 HTML5 Canvas 可缩放的向量图形 (SVG)级联样式表级别 3 (CSS3) 过渡 动画CSS 转换WebGL CanvasSVG过渡动画转换WebGL
脱机存储Flash、Java 小程序和 Google Gears Web 存储文件 APIIndexedDB应用程序缓存 API Web 存储文件 APIIndexedDB应用程序缓存 API
网络通信、资源共享和文件上载 Flash 和 Java 小程序 HTML5 Web 消息传递跨源资源共享 (CORS) 通道消息传递XMLHttpRequest

 

视频和音频

插件的一个最常见用法就是在网页中嵌入丰富的、使用媒体播放器(如 Flash Player)的音频和视频内容。但现在,这一趋势会随着 HTML5 视频和音频规范的开发以及这些规范对各种现代浏览器日益增加的支持而变化。对于 HTML5 视频音频元素的支持已经在 Internet Explorer 9 推出之后存在。Internet Explorer 10 增加了对用于视频字幕HTML5 跟踪元素的支持。在 Internet Explorer 11 中,分别通过媒体源扩展加密媒体扩展支持对 HTML5 媒体元素的媒体流和内容保护。"HTML5 视频"一节将更详细地讨论关于支持的内容。

图形

插件还已经用于提供带动画的、包含丰富内容的交互游戏和多媒体广告。自 Internet Explorer 9 以来,Internet Explorer 就开始提供大量基于标准的 硬件加速图形技术替代项,包括 HTML5 CanvasSVGCSS3 2D 转换 。 Internet Explorer 10 增加了对 SVG 滤镜效果CSS3 过渡与动画CSS3 3D 变换的支持,并且 IE11 增加了对 WebGL 的支持。

脱机存储

许多 Web 应用程序都需要访问数据文件,在过去,这意味着需要访问用来存储这些文件的远程服务器。但是,这会需要网络连接,而且为了成为桌面客户端应用程序的有效替代项,Web 应用程序必须能够脱机工作。为了满足 Web 应用程序的脱机存储需求,最初提供了诸如 Java 小程序和 Google Gears 之类的插件,但是现在推出了基于万维网联合会 (W3C) 标准的替代项。自 Windows Internet Explorer 8 以来就已经开始支持 Web 存储,Internet Explorer 10 引入了对文件 APIIndexedDB应用程序缓存 API 的支持,并实现了构建脱机体验的各种可能性。

网络通信、资源共享和文件上载

现代网站和应用都涉及到社交和共享,这通常要求独立的网站能够安全而又快速地与数据进行通信,上载和共享数据。过去,当 Internet Explorer XDomainRequest object 无法提供他们所需的功能时,开发人员有时需要使用诸如 Flash 之类的插件来进行跨域 HTTP 请求。在其他实例中,当他们所需的 Web 应用程序支持多个文件上载、在后台线程上上载文件或者显示文件上载或下载进度时,开发人员可能使用基于 Flash 或 Silverlight 的插件。在推出 Internet Explorer 10 之后所有这些都发生了变化,Internet Explorer 10 对于 XMLHttpRequest (XHR)XHR 进度事件Web Worker 支持跨源资源共享 (CORS) 标准。在 HTML5 Web 消息传递 区域中,IE8 引入了跨文档消息传递(其中包含 postMessage methodonmessage event),Internet Explorer 10 添加了对通道消息传递的支持。

HTML5 视频

Web 视频的未来发展方向是 HTML5;但是,一定要牢记几件事情,因为正在定义的相关标准和浏览器供应商实现将重点放在基准支持级别。

编码

HTML5 视频标记支持以下三种主要的视频编码格式:H.264、VP8 和 Theora。H.264 格式(又称为 .mp4 文件格式)是当今的 Web 上应用最广泛的视频编码格式,除了 HTML5 视频标记外,H.264 格式也受各种蓝光数字视频光盘 (DVD) 播放器、大多数的 Flash 和 Silverlight 播放器和相当多的移动设备的支持。

H.264 格式还有其他好处。你可以在 Web 上使用直接从相机中提取的视频,而不必对其进行编码。而且,H.264 视频比任何其他视频编码解码器提供的硬件支持好得多,这样,可以在低端机器上获得很好的 HD 视频性能并让 H.264 解码直接在 CPU 中发生。采用不同编码的同一个视频可能需要其他软件支持才能运行,而且会因此降低速度并提高耗电量。

并非所有的领先浏览器都内置了对于 H.264 格式的支持。目前,Firefox 和 Opera Web 浏览器仅在本机支持 VP8(或 .webm 文件)和 Theora(或 .ogg 文件)格式。Firefox 支持 H.264,虽然没有随附 H.264,但实际上依赖于 Windows 和其他主机操作系统的内置支持。虽然 Google Chrome 已宣布计划放弃对 H.264 的支持,但截至本文撰写时仍支持 H.264。 为了解决这些差异并确保 HTML5 视频能够在所有浏览器上工作,最佳做法是为采用 HTML5 的视频提供多个编码 source element。例如:



<video id="video1">
    <source src="slideshow.mp4" type="video/mp4">
    <source src="slideshow.webm" type="video/webm">
</video>


下表概述了主要的 HTML5 视频格式及其当前对主要浏览器的支持级别。

视频编码 音频 编码 文件格式Windows Internet Explorer Safari (适用于 Windows、Mac、iPhone、iPad) ChromeFirefoxOpera
H.264AAC.mp4IE9+Safari 4+ Chrome 3.0.182.2+2 Firefox 21+3(需要插件)
VP8Vorbis.webm (需要 Windows 编解码器)1(需要插件)Chrome 6.0.422+Firefox 4+Opera 10.60+
TheoraVorbis.ogg(需要插件)(需要插件)Chrome 3.0.182.2+Firefox 3.6+Opera 10.50+

 

1IE 对于播放 .webm 视频的支持不需要浏览器插件,但的确需要用户安装免费的 Windows VP8 编解码器
2虽然 Google Chrome 宣布计划在以后放弃对 H.264 格式的支持,但目前仍支持 H.264。
3Firefox 21 引入了 Windows 7(及更高版本)对 H.264 的支持,而 Firefox 24 引入了 Linux 对 H.264 的支持。

为了确保 HTML5 视频和音频播放器能够跨不同的浏览器播放,请参阅"实际的跨浏览器 HTML5 音频和视频"

流和数字版权管理 (DRM)

视频可以是直播(流式处理),也可以是点播(即通过 Web 服务器上的文件播放)。 从 IE11 开始,IE 既支持点播 HTML5 视频,也支持流式处理 HTML5 视频,同时还支持 DRM。

Windows 8.1 上的 IE11 支持用于 HTML5 实时流(或“自适应带宽”)HTML5 视频的 W3C 媒体源扩展 (MSE),其中视频质量可以根据网络效率提高和降低。这为现在网络上使用的专用自适应流式处理技术提供了一种替代方案。

Windows 8.1 上的 IE11 还支持 W3C 加密媒体扩展 (EME),以支持通过 HTML5 视频播放受保护的内容。IE11 支持 PlayReady DRM 系统

注意  媒体源扩展和加密媒体扩展在 Windows 7 上的 IE11 不受支持。

MPEG-DASH 是一个 Internet 流的新兴标准,IE11 中的 MSE 和 EME 与 MPEG-DASH 内容和 ISO BMFF 内容(通用媒体文件类型的基本格式)兼容。有关实现 DASH 客户端以利用 MSE 和 EME 的详细信息,请参阅使用 MPEG-DASH 构建无插件媒体流应用和网站(MSDN 第 9 频道视频)和 DASH 行业论坛DASH.js 参考实现(GitHub 存储库)。

动态 TextTrack 和样式字幕

Internet Explorer 10 引入了基于文件的 TextTrack 支持,用于支持跟踪文件的 WebVTT 和 TTML 格式。跟踪文件与视频文件类似,都需要服务器为基于 WebVTT 或 TTML 的文件提供 MIME 类型的标头。IE11 扩展了对 HTML5 视频的 TextTrack 支持,从而加入了以编程方式创建 TextTrackTextTrackCue 对象的功能,这样就能动态构建视频字幕跟踪。使用 addTextTrackaddCue 方法可以创建新跟踪并将其添加到正在运行的视频中。 IE11 同样也支持简单交付配置文件 (SDP),允许你创建能够在视频播放器任何位置放置文本的 TTML 跟踪文件,以及各种控制字体、颜色和样式,让视频播放器中的隐藏字幕文本可读性更高或更有趣。

有关视频支持的详细信息,请参阅 IE 11 开发人员指南中的简单交付配置文件 (SDP)动态 TextTrack

将插件作为最后的补救办法

为了在将来获得最佳效果和浏览器兼容性,最好开发完全不使用插件的站点。但是,在某些情况下,网站或 Web 应用程序可能无法在完全没有插件的情况下工作。在这些情况下,可以遵循一些回滚技术和缓解策略来确保 Internet Explorer 10 和其他无插件浏览器的用户获得可能的最佳体验。

有选择性地提供插件

无法通过任何编程方法来了解你的网站或应用是在采用新的 Windows UI 的 Internet Explorer 10 和更高版本中查看,还是在桌面上查看;对于用户代理字符串同样如此。但是,不管怎样这都不是有用的区分,因为这两种体验都是使用 HTML5 和脚本引擎运行的,IE 可能是使用 ActiveX 筛选运行的。在规划无插件回滚策略时,为了确保站点在各种 Internet Explorer 10 体验和其他无插件浏览器之间的兼容性,最佳做法是检测功能(而非浏览器)。你的站点可以使用功能检测来检查客户端浏览器是否支持特定的功能,如果不支持,则在原位提供基于插件的功能。

此示例使用 HTML 元素回退为不支持 HTML5 视频元素的浏览器提供插件解决方案。


 
<video id="video1" width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
        <param name="SRC" value="http://ie.microsoft.com/testdrive/IEBlog/Common/player.swf?file=video.mp4">
        <p>Please update your browser or install Flash</p>
    </object>
</video>


下一个示例使用基于 JavaScript 的回退为不支持本机 XMLHttpRequest (XHR) 的浏览器提供插件解决方案。



// Best Practice: Use Native XHR, if available.
if (window.XMLHttpRequest) {
    // If IE7+, Gecko, WebKit: Use native object.
    var xmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
    // ...if not, try the ActiveX control. 
    var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
    // No XMLHTTPRequest mechanism is available.
}


相反,如果你的站点使用特定的插件提供更丰富的体验,则可以检查该插件是否已加载(例如,通过其主机 object elementreadyState property),然后根据需要回滚到无插件体验。有关回滚策略的详细信息和代码示例,请参阅 IE 兼容性手册中的插件和 ActiveX 控件

使用兼容性视图 (CV) 列表播放 Flash 内容

在 Windows 8 中,Internet Explorer 10 提供了一个集成式 Flash Player,无需下载或安装其他播放器。尽管任何网站都可以在桌面版 Internet Explorer 中播放 Flash 内容,但只有兼容性视图 (CV) 列表的 NoFlash 部分中未列出的网站才能在采用新 Windows UI 的 Internet Explorer 中播放 Flash 内容。(在 NoFlash 部分中列出不会影响网站的文档模式。)只有当包含 Flash 内容的网站拥有已知的安全性或可靠性问题时,才会在此列表中列出。开发人员也可以请求将他们的网站从 CV 列表中删除以便播放 Flash 内容。有关详细信息,请参阅"包含适用于 Windows 8 的 Adobe Flash Player 内容的网站的开发人员指南"

万不得已时切换到桌面

为了确保你的站点具有前向兼容性并为最广泛的用户受众长期提供最佳体验,最好新建不使用插件的站点或者将现有的站点更新为不使用插件。如果这不可行,请考虑将你的站点迁移到 Windows 应用商店应用或者为 Windows 应用商店应用编写代码并使用自定义的 Windows 运行时对象来代替插件所提供的功能,然后将你的站点连接到 Windows 8 应用

在短期内,Internet Explorer 10 提供 requiresActiveX 功能开关,如果该开关处于启用状态,它将显示一个通知,提示用户切换到桌面:

Internet Explorer 10 为包含需要切换到桌面 Internet Explorer 的加载项的站点提供提示

只有当缺少插件将中断网站时,才使用 requiresActiveX 开关。下面介绍了通知的工作方式:

  • 通知会针对每个主机名访问显示一次,而且显示在一个单独的浏览器选项卡中
  • 通知会在用户刷新页面时再次出现
  • 通知不阻止用户与站点交互(它是非模式化的)
  • 在子框架中加载的页面将不触发通知

对于站点兼容性问题,为用户提供用来切换到桌面 Internet Explorer 的选项是短期缓解措施,而不是长期解决方案。在过去,桌面浏览体验和大多数插件不是为小屏幕、电池限制和无鼠标设计的。

下表列出了可用来启用 requiresActiveX 开关的不同方法。

用来启用 requiresActiveX 功能开关的方法管理者
HTTP 标头/元标记Web 开发人员
IE10 兼容性视图 (CV) 列表Microsoft
组策略 CV 列表设置系统管理员

 

请记住,Windows RT 不支持运行、模拟或移植现有的 x86/64 桌面应用。撰写 Windows 8 博客提供了更多信息。

HTTP 标头和元标记

Web 开发人员可以启用 requiresActiveX 功能开关,方法是使用下面的 HTTP 标头:


X-UA-Compatible: requiresActiveX=true

或者使用每个受影响的网页上的如下元元素

<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>

兼容性视图列表

Microsoft 为需要 ActiveX 的已知站点维护了一个兼容性视图 (CV) 列表。这些站点可以按域或子域列出。例如:



<domain docMode="EmulateIE7" featureSwitch="requiresActiveX:true" versionVector="7" uaString="7">contoso.com</domain>
<domain docMode="EmulateIE7" versionVector="7" uaString="7">
    fabrikam.com
    <path docMode="EmulateIE7" featureSwitch="requiresActiveX:true" versionVector="7" uaString="7">/tv</path>
    <path docMode="EmulateIE7" featureSwitch="requiresActiveX:true" versionVector="7" uaString="7">/video</path>
</domain>


通过组策略支持一个单独的、仅限主机名的兼容性视图列表,以便所触发的通知与基于 Microsoft 的公共 CV 列表触发的通知相同。

可以使用 F12 开发人员工具来确定你的站点是否位于 IE CV 列表中。如果你的站点以“requiresActiveX:true”形式列出,但是你最近去除了它的插件依赖关系,则 IE10 兼容性列表设置可以替代为指定 requiresActiveX=false 的 HTTP 标头或元数据。有关 CV 列表的详细信息,请参阅"了解兼容性视图列表"

让你的网站准备使用无插件 Web

日益增多的网站、Web 应用程序、浏览器和设备正倾向于不使用插件,从整体来看,这对于消费者、Web 开发人员和现代的 Web 都有好处。在为 IE 中的无插件浏览准备站点和 Web 应用程序时,最佳做法是将关键的插件功能替换为基于标准的技术,仅在没有基于标准的替代项时有选择地提供插件,而且仅在万不得已时才提示用户切换到桌面。通过遵循上面的指导原则,你可以为最广泛的受众提供可能的最佳浏览体验,并确保你的站点能够与 IE 很好地协作。

相关主题

面向消费者的 ActiveX 筛选
没有插件的浏览
Windows 8 浏览和无插件 HTML5
网站和无插件 Web
iOS 到 IE10:构建无跨浏览器插件的体验

 

 

显示:
© 2014 Microsoft