html5 sandbox,”基情“无限的IE10和HTML5

最近刷微博刷得有点过了，以至于我只想到这个标题。

今晚一直在看IE Blog，发现了很多关于IE10的新特性介绍，而且有些特性还是挺激动人心的。

我以为，IE10比IE9更具革命性，毕竟IE10是仗依着即将发布的Window8和Window Phone两个重要操作系统出来混的。

之前一直很少会关心IE浏览器，但是我一想到如今移动端对HTML5，CSS3给力支持的如此动人的景象，可能以后会被Window Phone的IE10捣乱，心怀不安，于是，我怀着忧国忧民的心情研究了一下IE10对HTML5的支持，现在汇报如下。

另外，需要说明的是，现在浏览器更新节奏比较快，所以要具体说明一下，如无特别注明，本文的IE10指的是IE10 Preview2 or above.

HTML5语法解析

HTML5第一次把语法解析规则也作为一项规范，其目标是保证HTML在所有的现代浏览器里得到一致的解析，IE团队在这项工作中下了很大的功夫，使得IE10上能很好的支持HTML5解析算法。

正确语法解析

对于正确解析合法有效的标签，IE9已经表示无鸭梨了。

IE10的二逼之处在于，即使是不合法的标签，它依然会按照HTML5定义的规则来解析，下面的例子说明了对于非法标签的一些修复办法：

HTML

DOM ( HTML5 + IE10 )

DOM ( IE9 )

12

|- |- "1"

|- |- "2"

|- |- "1"

|- |- "2"

|-

Test 1

Test 2

|-

|- "Test 1\n"

|- |- "\n "

|-

|- "Test 2\n"

|-

|- "Test 1\n"

|- |- "\n "

|-

|- "Test 2\n"

使用innerHTML互操作

我们知道，在以往的IE上，某些标签的innerHTML属性不能重写；终于，IE10让它们重见天日了。

var select = document.createElement("select");

select.innerHTML = "onetwo";

var table = document.createElement("table");

table.innerHTML = "

onetwo";

移除遗留的特性

因为IE早前的一些版本中的一些特性和HTML5语法解析不兼容，所以在IE10模式中，它们已经被移除掉了。依赖与这些特性的网站将会在旧模式中继续被支持。而这些移除的特性包括：

Same Markup: Writing Cross-Browser Code

在IE10和其他浏览器中，这会被解析为未知元素

而在老版本IE中，它会与 "my.htc"绑定

在IE10和其他浏览器中，这会被解析为HTML

而在老版本IE中，这回被解析为XML.

Page Visibility

这个HTML5特性可能很少人听说，毕竟目前只有IE10和Chrome13及以上版本的浏览器支持。但是，这个API很有用，它可以用来判断用户是否正在浏览当前页面。在一些需要经常轮询的网站，可以通过判断用户是在浏览还是在挂页面来决定轮询频率，这样可以提高性能和节约带宽。

具体地说，它包括两个属性和一个事件：

document.hidden: 返回一个布尔值表示页面是否可见

document.visibilityState: 返回一个可视状态值, 例如, PAGE_VISIBLE, PAGE_PREVIEW等.

visibilitychange: 可视状态改变会触发的事件.

在IE10中使用，需要在属性前面加上前缀"ms"。这里有一个官方的Demo，可以更清楚地告诉你这个API的作用。

Sandbox属性

HTML5新属性Sandbox让开发者可以限制iframe页面的行为权限。使用方法很简单，只需要在iframe元素里面加入sandbox属性即可。

加上这个属性之后，iframe里面的内容就会被禁用以下功能：

实例化插件

执行脚本

打开弹出窗口

提交表单

访问本地存储(包括localStorage,sessionStorage,cookies等)

发送XMLHttpRequests请求

访问父级Dom

使用HTC

这堆限制基本把iframe降级到脑残水平了，如果你想还它一点智商的话，可以把允许项作为sandbox属性的值来实现，下面例子解除了对脚本和表单提交的禁用。

当下网页经常要用到各种mash-up，这固然便于站点间的数据交互，但同时也有很多安全隐患，特别是跨站点脚本攻击(XXS)，用户体验劫持(user experience hijacking)等，sandbox出现让我们通过使用iframe作为沙箱容器，为用户提供安全的网页环境。这里有几个模拟的案例，可供参考。

Pointer和Gestures事件

用过Window8的童鞋都知道，Metro界面提供了全新的一流的触摸用户体验。在IE10和Metro App中，开发者可以使用一种更通用的输入形式，我们叫作“Pointer”。Pointer可以表示任何一个在屏幕中的点，这个点可以是一个鼠标指针，手写笔，一支手指或者多个手指。这个模型让我们在写网页和App的时候更加爽，无需考虑用户在使用PC，Pad还是手机。

Pointer事件

和鼠标事件类似，pointer事件会在点击，移动，释放，移进，移出的时候触发：

MSPointerDown

MSPointerMove

MSPointerUp

MSPointerOver

MSPointerOut

与鼠标不同的是，它可能在屏幕上有同时有多个点，例如，在多点触控的设备。这种情况下，多个独立的pointer事件会被触发，对应着屏幕的每一个点。当我们要对单独一个点进行处理，可以通过调用event.getPointerList()获得包含所有pointer的一个数组。

兼容鼠标

当触发pointer事件之后，IE10也会触发鼠标事件。这保证了在不支持Pointer事件的IE浏览器中，网页依然可以兼容。

当然，如果需要，我们也可以在MSPoniterDown事件方法中调用event.preventMouseEvent()来阻止鼠标事件触发。

特性检测

检测Poniter支持情况建议如下：

If (window.navigator.msPointerEnabled) {

//Pointer events are supported.

}

下面再看一个例子：

优化触控的一般方法

跟很多其他系统平台一样，IE10对于基本的触控交互提供了相对应的默认处理方法，譬如：

在可滚动区域按住可以移动内容

双指捏张可以缩放

点击，Hold住会出现菜单

轻触文本，可以选中

这些功能可以让网页和App提高触控体验，不过，有时候我们要禁用它们，以便实现我们自己的功能效果或者特别的用户体验。

下面是各种情况的禁用办法：

平移和缩放

.disablePanZoom {

overflow: hidden; /* 禁用平移 */

-ms-content-zooming: none; /* 禁用缩放 */

}

快捷菜单

element.addEventListener("MSGestureHold", function(e) { e.preventDefault(); }, false);

//禁止菜单显示

element.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);

//禁用菜单

轻触选中

element.addEventListener("selectstart", function(e) { e.preventDefault(); }, false);

//禁用选中

Gesture事件

除了Pointer事件之外，IE10还可以识别复杂的交互(譬如，捏放，猛击，旋转等等)。这些交互动作都会被描述为手势事件。最基本的两个静态手势有：

MSGestureTap

MSGestureDoubleTap

MSGestureHold

更加复杂的手势，可以通过MSGestureStart, MSGestureChange和 MSGestureEnd事件来完成。这些事件包含了手势变换的信息，例如，移动，放大，旋转，加速率等。下面例子可以说明：

document.addEventListener("MSGestureChange",logGesture,false);

var log = document.getElementById("log");

function logGesture(event) {

var gesture = "Translation: " + event.translationX + "px, " + event.translationY + "px

";

gesture += "Scale: " + event.scale + "x

";

gesture += "Rotation: " + event.rotation*360/Math.PI + " deg

";

gesture += "Velocity: " + event.velocityX + ", " + event.velocityY;

log.innerHTML = gesture;

}

Others

上面几个算是我感觉比较新颖的特性了，所以简单介绍了一下，虽然介绍介绍着变成了翻译...

除了上面说的这些，IE10还支持很多HTML5特性，但是大部分都已经妇孺皆知了，在这里就也不炒冷饭。不过，真的值得赞赏的是，IE10的确非常接近标准，无论是HTML5，CSS3的支持，还是ECMAScript5的实现，还是和Window 8 ，Window Phone系统的整合，都有了很大的进步。

想了解更多的童鞋可以参考下面三个网站，其中Internet Explorer 10 Guide for Developers是介绍IE10新特性的，但这比很多HTML5，CSS3教程对它们的描述还要完整和全面，IE10的确很给力。

参考资料

IE Blog

Internet Explorer 10 Guide for Developers

Windows Internet Explorer Testing Center

via：vinqon