iOS4.2 supports new HTML5 features for iOS 4.2

Article introduction of Wulin.com (www.vevb.com): iOS version 4.2 safari supports updates to HTML5 features.

Article compiled from Safari on iOS 4.2: Accelerometer, WebSockets, SVG, AJAX2 & better HTML5 support

Well, it is said that iOS 4.2 has been released, and all iPhones, iPods, iPads, etc. can be updated for free. It is gratifying that this version of iOS has a relatively large upgrade in support of new HTML5 features, including support for WebSockets and Accelerometer, new event, support for printing, new JavaScript data types and better SVG support.

In fact, Apple has not updated the Safari documentation yet. The information here is only based on the JavaScript research and testing of Safari (Note: Safari refers to the Safari browser in iOS mobile devices, not including Safari on PC and Mac machines). Specifically, the new features detected are as follows:

Perhaps you already know that iOS devices have acceleration sensors (and others, such as magnetism and gyroscopes), but until now, web developers do not have permission to operate these sensors. Safari now supports the DeviceOrientation API (W3C draft), but although it seems that all APIs are supported (including ondeviceorientation and ondevicemotion events), in testing, I can only successfully use the accelerator's data.

If you already have an iOS 4.2 device, you can use Safari browser to access ad.ag/jtjdmj to test it yourself.

To detect 50 accelerometer data changes per second, you need to listen to the ondevicemotion event on the window global object, and then use the accelerationIncludeGravity property on the DeviceOrientationEvent parameter. It has three values: x, y, and z, which represent the acceleration g (gravity) on each coordinate respectively. You can use acceleration counts in games, effects, or CSS animations.

12345window.event

Another big update is support for WebSockets. WebSockets is a W3C HTML5 API that is still in the draft state, allowing JavaScript to use an open two-way, dual-work connection to a server through TCP sockets. This is very good news for chat and real-time applications, as AJAX periodic calls can be greatly reduced.

You will need a server that can understand the new WebSocket protocol through an HTTP handshake. If the server does not support WebSocket or due to proxy/gateway reasons, you will also rely on a fallback mechanism.

In fact, webkit's support for HTML5 forms is relatively good. Now, Safari in iOS 4.2 has begun to support the required attribute and:invalid CSS pseudo-class. In this way, the following code will show a text box that displays a green background when it is entered correctly, and a yellow background when it is incorrect.

<style>input {background-color: green;color: white;}input:invalid {background-color: yellow;}required>

The object named FormData allows us to easily generate form data through Ajax.

iOS 4.2 introduces AirPrint, an unlimited printing solution. That is, we can now use window.print to call the print dialog in Safari.

Safari now supports collections of binary classes (Blob Class) and many integer types, such as Float32Array, Int8Array, Uint8Array, Int16Array Unit16Array, Int32Array, and Uint32Array, etc. arrays defined in the Typed Arrays specification. More information is accessible.

In the new action class event, we can now use HTML 5 new onhashchange event to detect changes after hash (#) in URLs in AJAX-class webapps, as well as invalid, onbeforeload and onpopstate events in HTML5 draft specifications.

Now we can also use window.captureEvents and window.releaseEvents to listen for events in the global method.

iOS supports SVG as standalone files as well as inline SVG (using svg tags). Now we can create SVG documents directly in our document - using more than 20 SVG___ classes like SVGDocument, SVGImage, etc...

For Canvas, imageData data-type is now supported, a way to manipulate images at pixel level from JavaScript.

PS: Since I don’t have iPhone, iPad, etc., there is no way to test the content in the article one by one. If you find some errors or new content, please submit it by leaving a message. I will update this article in time. Thank you - Shenfei