iOS 4.2版safari對HTML5特性支援更新

文章目錄

• 加速器支援
• WebSockets
• HTML5表單支援
• AJAX2
• 列印支援
• 新的JavaScript 資料類型
• 新DOM事件
• SVG和Canvas支援增強
• 其它東東

文章整理自 Safari on iOS 4.2: Accelerometer, WebSockets, SVG, AJAX2 & better HTML5 support
請尊重著作權，轉載請註明出自前端觀察

嗯，據說iOS 4.2發布了，所有的iPhone，iPod、iPad啥的，都可以免費更新。令人欣慰的是，這個版本的iOS對HTML5新特性的支援有比較大的升級， 其中包括對WebSockets和加速器(Accelerometer)的支援，新的event、支援列印、新的JavaScript 資料類型和更好的SVG支援。

事實上，Apple還沒有更新Safari文檔。這裡的資訊只是基於在Safari(註：文中的Safari指iOS行動裝置中的Safari瀏覽器，不包括PC和Mac機中的Safari)自身的JavaScript研究和測試上。具體來說，檢測到的新特性如下：

• 通過DeviceOrientation API支援加速器
• HTML5 WebSocket API
• HTML5 表單支援增強
• 列印支援
• 新的JavaScript 資料類型
• 新DOM事件
• 增強對SVG和Canvas的支援

加速器支援

或許你已經知道，iOS裝置都有加速感應器(還有其它的，比如磁力及和陀螺儀)，但是直到現在，網頁開發人員沒有操作這些感應器的許可權。Safari現在支援 DeviceOrientation API (W3C草案)，不過，雖然看起來全部的API都是被支援的(包括ondeviceorientation 和ondevicemotion事件)，但是在測試中，我只能成功的使用加速器的資料。

如果你已經有了iOS 4.2的裝置，可以用Safari瀏覽器訪問 ad.ag/jtjdmj 自行測試。

要想檢測每秒鐘50次加速計資料變化，你需要在window全域對象監聽ondevicemotion事件，然後在 DeviceOrientationEvent參數上使用accelerationIncludingGravity屬性。它有三個值：x、y和z，分別 代表每個座標上的加速度g (gravity,重力)。你可以將加速計數用於遊戲，效果或者CSS動畫中。

1 2 3 4 5

window.ondevicemotion = function(event) { // event.accelerationIncludingGravity.x // event.accelerationIncludingGravity.y // event.accelerationIncludingGravity.z }

WebSockets

另一個大更新是對WebSockets的支援。WebSockets是一個尚處於草案狀態的W3C HTML5 API，允許JavaScript使用一種開放的雙向、雙全工串連到一台伺服器，通過TCP sockets。這對於聊天和即時應用來說是一個非常好的訊息，因為可以大大減少AJAX周期性調用。

你將需要一台能夠通過一種HTTP握手理解新的WebSocket協議的伺服器。如果伺服器不支援WebSocket或者由於代理/網關的原因，你將還要依賴一種fallback機制。

HTML5表單支援

其實webkit對HTML5表單的支援相對已經比較不錯，現在iOS 4.2的Safari開始支援 required屬性以及 :invalid CSS偽類。這樣的話，下面的代碼將展示一個文字框在輸入正確的時候顯示綠色背景，而不正確的時候顯示黃色背景。

<style>
input {
background-color: green;
color: white;
}
input:invalid {
background-color: yellow;
}
</style>
<input type="text" required>

AJAX2

名為FormData對象，這允許我們很方便的通過Ajax發生表單資料。

列印支援

iOS4.2引入了 AirPrint，一種無限列印方案。也就是說，我們現在可以使用 window.print 來在Safari中調用列印對話方塊了。

新的JavaScript 資料類型

Safari現在支援 二進位類 (Blob Class)和許多整數類型的集合，比如 Float32Array，Int8Array，Uint8Array，Int16Array Unit16Array，Int32Array以及Uint32Array等在Typed Arrays規範中定義的數組。更多資訊可訪問 Firefox 網站。

新DOM事件

在新的動作類事件中，我們現在可以使用HTML 5新的 onhashchange事件用於檢測AJAX類webapp中URL中散列(#)之後的變化，以及HTML5草案規範中的invalid、onbeforeload 以及onpopstate事件。

現在，我們也可以使用window.captureEvents和window.releaseEvents來監聽全域方法中的事件。

SVG和Canvas支援增強

iOS支援作為獨立檔案的SVG以及內聯SVG(使用svg標籤)。現在我們可以直接在我們的文檔中建立SVG文檔——使用超過20個SVG___類，比如SVGDocument，SVGImage等…

對於Canvas，現在支援imageData data-type，一種從JavaScript以像素級操作圖片的方法。

其它東東

• 支援window全域對象的一個styleMedia屬性
• 一種WebGLRenderingContext類可用，3D Drawing API(也就是WebGL)的一部分。
• 一個全域RGBColor建構函式

來自：前端觀察