iOS至 IE10 Metro: 构建 跨浏览器 插件免费体验

分享于 

18分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

如果你已经为iPad构建了plug-in-free浏览体验,那么一些更改将使它在 Windows 8上为新的 IE10 plug-in-free体验做好准备。 随着更多浏览器采用plug-in-free方法,现在是开始思考的好时机。 我将向你介绍如何在几个步骤 below 中编写代码,这些代码可以在所有现代浏览器中良好。

今天我们将使用 MSNBC plug-in-free体验体验。 它分为两种: 样式和脚本。

我将使用称为Fiddler的代理应用程序来修改MSNBC的文件。 你可以从 http://fiddler2.com 下载这个工具。 这里工具允许我修改远程文件,就像它们在本地机器上一样。 如果你直接访问自己的站点,可以忽略 Fiddler,直接使用你的文件。 Fiddler为测试更改提供了一个很好的方法,而不会破坏你的实时站点。

步骤 1: 为现代浏览器声明标准模式和有效标记

为了使用HTML5元素,我们将使用 below,你首先需要确保在标准模式下运行。 确保这一点的一种方法是在文档的顶部包含HTML5文档:

<!DOCTYPEhtml>

步骤 2: 更新你的CSS供应商前缀

CSS语言不断地处于变化状态,如建议。更新和标准化的新特性。 为了让开发者了解如何使用这些新特性,浏览器供应商通常通过带前缀的属性提供实验实现。

负责使用供应商前缀的关键部分是确保来自每个供应商的前缀都包含在你的站点中,以支持最广泛的功能支持。 在许多情况下,尤它的是在构建一个中心站点时,你可以能只关注 -webkit 属性,省略了它的他浏览器。 -o, -ms, and -moz 最后,你大大限制了可以呈现插件免费站点的目标设备,并为它的他现代浏览器提供降级体验。

例如我们在 MSNBC 上找到以下 :

background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(1, rgba(192,192,192,.6)),
color-stop(0.5, rgba(0,0,0,.6))
);

随着HTML5插件的免费体验的发展,扩展这些规则以提供它的他主要浏览器的供应商前缀很重要。

background: -webkit-linear-gradient(
top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );
background: -moz-linear-gradient(
top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );
background: -ms-linear-gradient(
top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );
background: -o-linear-gradient(
top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );
background: linear-gradient(
top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );

虽然更详细,但对广泛浏览器特性支持的好处肯定超过了所涉及的额外类型。 除了,SASS and,还有许多优秀的工具可以分解这个工作负载,比如SASS和Compass-prefix-free Snippets在即将发布的Visual Studio 2011中。

另外,如果主要使用 JavaScript,并且希望节省客户端浏览器的时间,请查看中的说明,以最佳实践在IEBlog上编写供应商前缀

步骤 3: 去除浏览器嗅探方法

用户和设备的浏览器可以使用两种方法来确定。 不幸的是,一种方法很受欢迎,。 这里方法包括检查特定模式或者值的导航器对象。

if ( navigator.userAgent.indexOf("iPad") > -1 ) {// Load HTML5 Experience} else {// Load Flash Experience}

上面 代码查看值"ipad"的User Agent 字符串,如果发现该值,则会提供一个 plug-in-free HTML5体验。 否则,假设你安装了 Flash的设备上。 即使浏览器的浏览器能够处理HTML5功能,也会导致不能使用 Plug-Ins的非ipad用户的经验。

下面是查找 IE 版本的尝试。

if ( tests.IE ) {
j =/msie.(d.d+)/i;
k = navigator.userAgent.match(j)[1];
}

对 User Agent 字符串进行测试,该 Pattern 尝试针对版本号。 这里 Pattern 查找单个数字,后跟句点,后跟任意数量的附加数字。 这个测试会发现"msie 8.0"和"msie 9.0"等值,但是它不会识别最新的IE 版本,因为它将自己标识为"msie 10.0",因为在这个阶段之前只有一个数字。

这只是为什么浏览器嗅探不是最佳实践的几个例子。 User Agent 字符串不是可以变的- 它是一个易于通过插件更改的读写值,甚至是用户。 大多数现代浏览器都包括能够轻松地从开发工具中更改这个值。

如果我们禁用插件,或者从没有 Flash的设备/浏览器访问,我们期望它尝试plug-in-free体验。 不幸的是,这并不是。 我们没有看到HTML5的经验,而是被要求下载 Flash。 这是因为站点将用户置于以下两种类别之一: iPad用户,或者启用了flash的用户。

特征检测

在浏览器中直接测试特性,而不是想猜测浏览器能够通过侦听 User Agent 字符串( 最终会让你失败)。 如果你想测试浏览器通过HTML5传递视频和音频,你实际上可以通过JavaScript来创建这些元素。 这种做法叫做 feature detection

if (!!document.createElement("video").canPlayType ) {// Load HTML5 Video} else {// Load Flash Video}

在 上面 示例中,我们从测试新创建的video 标记中是否存在 canPlayType 方法开始。 我们使用双重否定来将响应转换为布尔值。 如果浏览器理解 video 元素是什么,那么 canPlayType 方法就会出现。 如果浏览器未知,则 canPlayType 方法将不存在。 如果这个测试通过了我们就加载我们的HTML5视频。 如果测试未通过,我们将尝试加载 Flash。 在这里可能会发生更深的特征检测,因为 Flash 可能不在机器上,或者被禁用。

特征检测是确定浏览器能力的首选方法,因为没有涉及到的猜测。 如果浏览器经过正确构造的测试,它绝对支持你希望使用的特性。

为你提供功能测试的许多伟大工具。 一旦提供了超过 40个测试的工具,就是 这个工具创建一个名为" Modernizr"的全局对象,它包含测试的结果。 使用 hardwarebutton,对HTML5视频支持进行测试非常简单:

if ( Modernizr.video ) {// Load HTML5 Video}

is在浏览器中进行探索,看看访问该页面的设备是否是iPad或者不是。 我们的第一步是删除浏览器嗅探代码,并将它的替换为特征检测代码。

在修改浏览器嗅探代码之前,我们首先需要找到它。 在 IE 中,按F12键将启动我们的开发人员工具。 在工具中,打开脚本选项卡并对"用户 useragent"进行搜索。 这里搜索将在站点文件的所有脚本中查找这里属性 NAME的任何实例。 我们对 http://www.msnbc.msn.com/id/37156949/ 第 41行的结果感兴趣。

现在我们知道了要编辑什么,我们可以打开Fiddler并加载我们的流量。 打开Fiddler后,在MSNBC页面上执行硬刷新( IE 中的Ctrl+F5 )。 这将导致所有的页面会话在Fiddler中列出。

仔细看,你会注意到我们的资源是最上面的三分之一。 接下来,我会为这个会话文件设置一个 AutoResponder 以便在请求时,在服务器响应位置替代自己的自定义文件:

  • 右键单击这里会话并从上下文菜单中选择"解码选定的会话"。
  • 选择右侧的自动回复选项卡。
  • 单击"自动回复"选项卡中的"启用自动响应"复选框。
  • 将选定的会话从左面板拖动到自动回复选项卡。

这里时,应该在自动回复选项卡中具有以下规则:

  • 如果 URI MATCHES: EXACT:http://www.msnbc.msn.com/id/37156949/
  • 然后响应:*200-SESSION_3

右键单击自动回复中的条目并选择 Edit Response。 在下面的弹出式菜单中,switch 到SyntaxView选项卡,我们将找到这里文件的源。 如预期,第 41行包含我们的浏览器嗅探代码:

if(!(navigator.userAgent.toLowerCase().indexOf("ipad")>-1)){// Flash Experience}

我们不需要测试tmodel的内容,而是寻找对HTML5视频标签的支持。 switch 将 上面 条件设置为以下值:

if (!document.createElement("video").canPlayType ) {// Flash Experience}

这个测试检查我们是否不能使用视频元素。 如果canPlayType返回为未定义,它将被转换为 true,并将输入第一个代码 block,设置 Flash 体验。

步骤 4: 更新触摸和指针事件

Safari同时支持触摸事件模型和鼠标事件模型。 IE 10将触摸。鼠标和手写笔事件组成一个名为 pointer的抽象项。 事实上,IE 10是第一个在所有设备上工作的浏览器。 这个抽象大大减少了决定应该绑定哪些事件模型以及如何检测用户交互的工作量。 然后通过MSPointer事件处理这个指针。 如果需要,可以通过访问 pointerType 属性来确定指针的类型。

IE 不支持苹果事件模型的专有事件,包括 touchstart, touchmove 事件和 touchend,因此需要修改msnbc监听器事件,以侦听 MSPointer事件( 如 MSPointerDown, MSPointerUP ) 和 MSPointerMove

由于事件模型实现的不同,使用诸如或者类似这样的代码检测工具来针对所有主要事件模型:

if (window.navigator.msPointerEnabled) {
myCanvas.addEventListener("MSPointerMove", paint, false);
} else {
myCanvas.addEventListener("mousemove", paint, false);
myCanvas.addEventListener("touchmove", paint, false);
}

MSNBC只支持触摸屏,我们需要更改,以便恰好使用鼠标的访问者仍可以与页面交互:

我们的事件在 http://www.msnbc.msn.com/id/43662671/15 中被绑定:

document.addEventListener("touchstart", touchHandler, false);
document.addEventListener("touchmove", touchHandler, false);
document.addEventListener("touchend", touchHandler, false);

我们将更新它,以包括MSPointer事件:

if (window.navigator.msPointerEnabled) {
document.addEventListener("MSPointerDown", touchHandler, false);
document.addEventListener("MSPointerMove", touchHandler, false);
document.addEventListener("MSPointerUp", touchHandler, false);
} else {
document.addEventListener("touchstart", touchHandler, false);
document.addEventListener("touchmove", touchHandler, false);
document.addEventListener("touchend", touchHandler, false);
document.addEventListener("mousedown", touchHandler, false);
document.addEventListener("mousemove", touchHandler, false);
document.addEventListener("mouseup", touchHandler, false);
}

首先我们要检查指针是否存在。 由于MSPointer覆盖了鼠标。手指和笔,除了它们,我们不需要任何其他东西。 如果需要,我们会返回,同时提供触摸和鼠标事件。

接下来,我们需要在中为这些事件类型创建事件。 目前,MSNBC以以下方式开始:

if ( event.type == "touchstart" ) {/* Start drag logic */} elseif ( event.type == "touchmove" ) {/* Drag logic */} elseif ( event.type == "touchend" ) {/* Complete drag logic */}

要侦听所有已经注册的事件类型,我们将对此进行修改:

if ( event.type.match(/(down|start)$/i ) ) {/* Start drag logic */} elseif ( event.type.match(/move$/i ) ) {/* Drag logic */} elseif ( event.type.match(/(up|end)$/i ) ) {/* Complete drag logic */}

上面 使用 MATCH 方法和一系列 正规表达式 来确定引发的事件。 如果事件以不区分大小写的"向下"或者"开始"结束,我们将开始拖动代码。 如果事件以不区分大小写的"移动"结束,我们将执行实际的拖动逻辑。 最后,如果事件以不区分大小写的"向上"或者"结尾"结束,我们将结束拖动事件。 注意:其他事件也可能被捕获,比如 onresizeendkeyup。 请在你的项目中考虑这一点。

上是在处理多触摸和鼠标输入的解决方案的一个实现。

拖动逻辑本身最初依赖于 event.targetTouchesTouchList。 这里成员在 IE 中不存在。 拖动逻辑尝试从 TouchList 中的第一个项目收集 pageXpageY 属性,但是在 IE 中,这些值直接在事件对象中找到。

var curX =
 event.targetTouches[0].pageX;

使用逻辑或者运算符,我指示on保存 event.pageX的值,只要在事件对象上存在 event.pageX。 如果没有找到这里属性,请在targetTouches列表中查找:

var curX = event.pageX ||
 event.targetTouches[0].pageX;

如果没有找到 event.pageX,我们将把 targetTouches[0].pageX的值分配给变量。

要记住的另一个重要事项是这个站点最初响应 touchmove。 当触摸播放列表时引发这里事件时,代码尝试根据触摸移动重新定位播放列表。 在触摸时没有悬停- 你要么触摸,或者你没有。

现在我们已经将鼠标事件绑定到这个逻辑中了,我们将引入悬停的可能性。 因这里,当touchmove在播放列表上重新定位我们的播放列表时,我们不希望这样做。 实际上,只要按下鼠标按钮,我们就只希望mousemove事件重新定位播放列表。

有关如何定位所有浏览器的详细信息,请参见处理所有浏览器的多触摸和鼠标输入的。

测试两种体验

回想一下我们以前的特征检测,如何首先检查HTML5视频支持是否在用户的浏览器中。 如果是,我们给他们 HTML5. 如果不是,我们给他们 Flash。 使用浏览器来测试我们的工作的一个简单方法是使用浏览器,即文档模式,它不支持HTML5特性。 使用 IE 进行测试非常容易:

  • 按F12显示开发者工具
  • 将文档模式更改为 IE 7标准
  • 刷新页面

如果我们的特征检测条件正确编写,你现在应该看到一个基于flash的演示文稿。 将文档模式切换回 IE 9标准( 或者或或者"标准"如果你使用的是 IE10 ),将返回HTML5体验。

it吧 !

希望这篇文章有助于定义可以在IE10地铁和它的他插件免费环境中正常工作的更改类型。 通过包括特征检测和负责使用供应商前缀的最佳实践,你应该能够为用户提供优秀的体验。 为了在其他plug-in-free环境中进行测试,下载 IE 10 ( 当前仅在 Windows 8 CP中可用) 并开始测试 !


plugin  EXP  构建  bro  浏览  FREE  
相关文章