[This documentation is preliminary and is subject to change.]

Support for several features defined in the HTML5 Working Draft specification began with Windows Internet Explorer 8 and was extended in Windows Internet Explorer 9. Windows Internet Explorer 10 Consumer Preview and Metro style apps using JavaScript for Windows 8 Consumer Preview support even more of HTML5. Internet Explorer 10 and Metro style apps using JavaScript support the following features:

• Asynchronous script execution
• Application Cache API ("AppCache")
• Drag-and-drop APIs
• File API
• Forms
• History
• Parsing
• Sandbox
• Spellcheck
• Video
• Web Workers
• Channel messaging
• WebSockets
• Related topics

Important  Except where noted, these features work identically in Internet Explorer 10 and Metro style apps using JavaScript.

Asynchronous script execution

The async attribute for the script element enables the associated script to load and execute asynchronously with respect to the rest of the page. That is, the script will load and execute in the background while the page continues to be parsed. For pages using processing-intensive scripts, the async attribute can significantly increase page-load performance.

The async attribute is part of the World Wide Web Consortium (W3C) HTML5 standard and is designed for situations where dependencies on a script do not exist, but the script still needs to run as soon as possible. Without the async (or defer) attribute, a script can block other page content from loading.

Internet Explorer 10 and Metro style apps using JavaScript support both the async and defer attributes for the script element (the defer attribute is supported in earlier versions of Windows Internet Explorer). The async and defer attributes can be used only if the src attribute is present.

The async attribute enables web developers to improve page load times with minimal effort. It also reduces the number of browser-specific workarounds required for script loader libraries.

For more information about how to implement asynchronous script execution, see Asynchronous Script Execution.

For a hands-on demonstration of asynchronous script execution, see HTML5 Async Scripts on the IE Test Drive.

Application Cache API ("AppCache")

Internet Explorer 10 and Metro style apps using JavaScript support the Application Cache API (or AppCache), as defined in the HTML5 specification, which enables the creation of offline web apps. AppCache allows webpages to cache (or save) resources locally, including images, script libraries, style sheets, and so on. In addition, AppCache allows URLs to be served from cached content using standard Uniform Resource Identifier (URI) notation.

By using AppCache to save resources locally, you improve the performance of a webpage by reducing the number of requests made to the hosting server; you also enable offline access to cached resources.

To cache resources locally:

1. Create a manifest file that defines the resources you want to save.

2. Reference the manifest file in each webpage designed to use cached resources.

Creating a manifest file

The manifest file is a text file that defines the caching behavior for resources used by the webpage. Manifest files are divided into three section types, which can be declared any number of times or repeated within the manifest file.

Declaring a manifest

To associate a manifest with a webpage, assign the name of the manifest file to the manifest attribute of the html element.

The ApplicationCache object

Internet Explorer 10 also supports the ApplicationCache object, which provides methods and properties that enable you to manage the application cache. In addition, you can define event handlers that show the progress of the cache process.

Use the applicationCache property of a window object (or worker object) to access the ApplicationCache object.

For detailed information on AppCache, including code samples and API definitions, see Application Cache API ("AppCache").

For a hands-on demonstration of AppCache, see A Day in the Park on the IE Test Drive.

Drag-and-drop APIs

Drag-and-drop functionality is something that computer users have come to take for granted as "just working," and there are a few ways to enable it within the browser. Internet Explorer 9 and earlier versions of Internet Explorer support the dataTransfer object and events to drag images, links, and text. Internet Explorer 10 adds support for the draggable attribute, which makes any HTML element you apply it to able to be dragged on the page. Internet Explorer 10 also adds the files attribute to the dataTransfer object, which enables drag-and-drop support for one or more files from the desktop to a webpage.

For example, the following code example enables the user to drag elements around the screen.

<button id="mybutton" draggable="true">Drag me</button>
<img src="photo.png" draggable="true" />
<div id="mydiv" draggable="true">Moveable text</div>

When a user drags a draggable element, Internet Explorer 10 provides a ghost image that moves with the cursor as it's dragged.

For more information about drag-and-drop in Internet Explorer 10, see Drag and Drop APIs.

File API

Internet Explorer 10 and Metro style apps using JavaScript introduce support for File API. File API is a W3C draft web specification for representing file objects in web apps, as well as programmatically selecting them and accessing their data. The File API is currently being standardized by the W3C Web Applications Working Group. By using File API, web developers can access local files on the client machine in a secure way without the need for extensions or plug-ins.

File API allows a browser or app to read and manipulate files but only if the user provides permission to do so. Additionally, File API allows for smoother file upload experiences without plugins.

For more information about File API, including code samples and information about the BlobBuilder API, file type filtering, and multiple file uploads, see File API.

Forms

Internet Explorer 10 and Metro style apps using JavaScript add new support for HTML5 Forms, including new states of the type attribute (on the input element), new attributes for the input element, and the progress element. This support enables developers to quickly and easily provide user prompting, input validation, and feedback with a minimal amount of script. HTML5 Forms is defined in section 4.10 of the W3C's HTML5 specification, which is currently in the Working Draft stage.

Before these HTML5 input types and attributes were available, checking that a phone number doesn't contain alpha characters or verifying that a properly formed email address has been entered required that the developer write extra logic for validation. Support for HTML5 client-side form and input validation enables the developer to concentrate on other tasks instead of building validation functions.

New HTML5 Forms support includes:

• Support for the Search, Telephone, URL, Email, and Number input states. Input states such as the URL and Email states will only accept properly formatted URLs and email addresses, respectively, as shown here.

  Copy

  
  <input type="url" name="url"/>
  <input type="email" name="email"/>
  
  
  

• Support for the Range input state, which enables the creation of a range or slider input control. This input state, which is signaled by setting the type attribute to "range", also includes the min, max, step, and value attributes, which define the value range and resolution of the control.

  Copy

  
  <input type="range" min="0" max="100" step="5" value="50"/>
  
  

• Support for the progress element, which enables you to automatically create a progress bar, with or without a percentage of completion displayed.

• Support for new HTML input attributes, which help ensure that required data is entered, and that data is entered correctly:

  • required
  • pattern
  • min, max, and step
  • placeholder (which works in conjunction with the :-ms-input-placeholder Cascading Style Sheets (CSS) pseudo-class)
  • autofocus
  • formnovalidate and novalidate
• Support for custom validation error messages, which enable you to indicate to users how to properly format entries such as telephone numbers or email addresses.
• Automatic Caps Lock warning on password fields.
• Support for the CSS pseudo-classes :valid and :invalid, which enable you to style a field according to whether its contents are valid.

For detailed information on HTML5 Forms support in Internet Explorer 10 and Metro style apps using JavaScript—including new support for Document Object Model (DOM) methods, attributes, and objects for validation from JavaScript—see Forms.

For a hands-on demonstration of HTML5 Forms with form and input validation, see HTML5 Forms on the IE Test Drive.

History

Internet Explorer 10 now supports the History interface of the HTML5 draft specification, which includes methods that enable you to manage a site's history stack and URL. This control gives end users the experience they expect from their Back and Forward buttons and the performance of small page updates without navigation or page loads. HTML5 History is defined in Section 5.4.2 of the W3C's HTML5 specification, which is currently in the Working Draft stage.

Note  The HTML5 History methods have no effect in Metro style apps using JavaScript.

The history.pushState() and history.replaceState() methods

Using the history.pushState() method, you can create a new history entry, and optionally include a state object. With the history.replaceState() method, you can modify the current history item. The syntax of these two methods follows.

history.pushState(data, title, url); 
history.replaceState(data, title, url); 

By using these new HTML5 methods, you can modify the path or the hash (information after the pound sign in the URL), but because of security, not the domain or origin of the current URL.

The window.onpopstate event

The window.onpopstate event handler notifies your app when the user clicks the Back or Forward buttons, or when the history.pushState() or history.replaceState() method is called. The following syntax shows how to differentiate between the two in your event handler.

window.onpopstate = function(event){
  if (event.state) { 
      // History was changed with pushState or replaceState.
  } else {
      // A page load occurred.
  }
}

The popstate event parameter contains the state (set by the data parameter) from the pushState or replaceState method. If a page is loaded, the state will be undefined.

Parsing

Internet Explorer 10 and Metro style apps using JavaScript fully support the HTML5 parsing algorithm, continuing the effort started in previous releases toward making HTML "just work" in the same way across browsers. This effort has included supporting Scalable Vector Graphics (SVG)-in-HTML, HTML5 semantic elements, preserving the structure of unknown elements, and improving whitespace handling.

For more information about the effect of stricter adherence to HTML5 parsing rules, plus interoperable innerHTML, better error reporting using F12 developer tools, and legacy features that have been removed, see Parsing.

Sandbox

Internet Explorer 10 and Metro style apps using JavaScript support the sandbox attribute, which enables security restrictions for iframe elements that contain untrusted content. These restrictions enhance security by preventing untrusted content from performing actions that can lead to potentially malicious behavior. The sandbox attribute is specified in Section 4.8.2 of the W3C's HTML5 specification, which is currently in the Working Draft stage.

To enable these restrictions, specify the sandbox attribute, as shown in the following code example.

<iframe sandbox src="frame1.html"></iframe>

When the sandbox attribute is specified for an iframe element, the content in the iframe element is said to be sandboxed.

For more information about the actions that are restricted when you set the sandbox attribute, plus the available customization flags and a code example, see Sandbox.

For a hands-on demonstration of HTML5 Sandbox in action, see Defense in Depth: HTML5 Sandbox on the IE Test Drive.

Spellcheck

The spellcheck attribute is part of the W3C's draft HTML5 specification that adds spell checking to input and textarea elements and editable text fields. Internet Explorer 10 and Metro style apps using JavaScript have the autocorrect feature for commonly misspelled word (such as "teh" instead of "the"), and the familiar red squiggle on other unrecognized words.

Spell checking is enabled by default on textarea elements, or an element marked contenteditable. You can disable or enable it by using the spellcheck attribute in the HTML element.

<input type="text" spellcheck="true" />

The spellcheck attribute provides three states, as follows.

The following example provides spell checking on several elements.

<body> 
  <input type="text" spellcheck="true" >Input element with type="text"</input>
  <div contenteditable spellcheck="true">Content editable div element</div>
  <textarea spellcheck="true">Text area element </textarea>
</body>

Video

Internet Explorer 10 and Metro style apps using JavaScript also introduce advances in HTML5 video via the video element, which, along with the audio element, was first supported in Internet Explorer 9.

These new features include:

• Respecting recorded video orientation (portrait versus landscape)
• Support for the track element

Respecting recorded video orientation

The HTML5 video element in Internet Explorer 10 automatically orients videos based on the orientation metadata stored in the video (that is, whether it is in portrait or landscape mode). The metadata is set through the recording device, typically a camera or camera phone. There are no APIs or settings for this capability, but it is something that a developer should be aware of because it affects the layout of the video element on a page.

The track element

Internet Explorer 10 and Metro style apps using JavaScript support the track element as described in Section 4.8.9 of the W3C's HTML5 standard, which is currently in the Working Draft stage. The track element enables you to add timed text tracks, such as closed captioning, translations, or text commentary, to HTML5 video elements.

The syntax for the element is as follows.

<video id="mainvideo" controls autoplay loop>
  <track src="en_track.vtt" srclang="en" label="English" kind="caption" default>
</video>

The <track> element represents a timed text file to provide users with multiple languages or commentary for videos. You can use multiple tracks, and set one as default to be used when the video starts.

The text is displayed in the lower portion of the video player. At this time the position and color can't be controlled, but you can retrieve text through script and display it in your own way.

For more information about adding timed text tracks using the track element, see Video: Timed Text Tracks.

For a hands-on demo of the track element in action with HTML5 video, see Accessible Video on the IE Test Drive.

Web Workers

Internet Explorer 10 and Metro style apps using JavaScript introduce support for the Web Workers. The Web Workers API defines a way to run scripts in the background. Web Workers are specified in the W3C's Web Workers specification, which is currently in the Working Draft stage.

Traditionally, browsers have been single-threaded, forcing all the script in your application to run together in a single UI thread. Although you can create the illusion of several things happening at once by using DOM events and the setTimeout API, it takes only one computationally intensive task to bring the user experience to a screeching halt.

The Web Worker API provides a way for web app authors to spawn background scripts that run in parallel with the main page. You can spawn several threads at a time to use for long-running tasks. A new worker object requires a .js file, which is included via an asynchronous request to the server.

var myWorker = new Worker('worker.js');

All communication to and from the worker thread is managed through messages. Both the host worker and the worker script can send messages by using postMessage and listen for a response by using the onmessage event. The content of the message is sent as the data property of the event.

The following example creates a worker thread and listens for a message.

var hello = new Worker('hello.js');
hello.onmessage = function(e) {
  alert(e.data);
};

The worker thread sends the message to be displayed.

postMessage('Hello world!');

For more information on Web Workers—including how to enable two-way communication, detailed API information, and more sample code—see Web Workers.

For hands-on demonstrations of Web Workers in action, see Web Worker Fountains and Web Worker Harness for test262 on the IE Test Drive.

Channel messaging

Internet Explorer 10 and Metro style apps using JavaScript introduce support for channel messaging, which enables code in different browsing contexts to communicate directly via ports. After the ports are created, the endpoints communicate by using a combination of the postMessage method and onmessage event. Channel messaging is specified in Section 5 of the HTML5 Web Messaging specification, which is currently in the Working Draft stage.

To open a channel, create a new MessageChannel object as follows.

var channel = new MessageChannel();

The channel object contains both port1 and port2 endpoints. Typically, one port is kept as the local port, and the other is sent to the remote window or worker. Ports can also enable communication between workers.

Here's an example of sending a port to be used for cross-document communication. Be aware that the array of ports must be the last argument.

otherWindow.postMessage('hello', 'http://example.com', [channel.port2]);

Similarly, you can send a port endpoint to a worker thread by using postMessage, as follows.

worker.postMessage({code:"port"}, [channel.port2]);

For more information on channel messaging—including examples of how a worker thread might receive and use a port, more sample code, and complete API descriptions—see Channel Messaging.

For a demonstration of channel messaging at work, see the Web Worker Fountains demo on the IE Test Drive, where channel messaging is used to coordinate lighting effects between worker threads.

WebSockets

WebSockets technology provides a new W3C JavaScript API and protocol for two-way communication over the Internet. This new protocol makes it easier to work directly with fixed data formats, and it bypasses the slower document-based HTTP protocol.

The current HTTP standard protocol is slow because it must request documents from a server and wait for the document to be sent before it can display a webpage. With WebSockets, you can send and receive your data immediately using text, binary arrays, or blobs.

The WebSocket API is simple and uncomplicated, requiring very little code. You can easily take advantage of low-latency bidirectional data interchanges that will help you create faster online games, instant social network notifications, real-time displays of stock and weather information, and other timely data.

WebSockets support

Internet Explorer 10 and Metro style apps using JavaScript add support for the WebSocket API as defined in the W3C's HTML5 specification on the WebSocket API, which is currently in the Working Draft stage.

Implementing WebSockets

Implementing this new data interchange technology is simple if you follow these steps:

1. Use a client browser that implements the WebSocket protocol.

2. Write code in a webpage that creates a client websocket.

3. Write code on a web server that responds to a client request through a websocket.

For more information on WebSockets support in Internet Explorer 10 and Metro style apps using JavaScript—including example code and complete API descriptions—see WebSockets.

For a demonstration of WebSockets at work, see the WebSockets Go to the Oscars demo on the IE Test Drive.

Related topics

Internet Explorer 10 Guide for Developers

Build date: 3/14/2012