Export (0) Print
Expand All

Internet Explorer 8 and Emerging Standards

As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Internet Explorer, see Internet Explorer Developer Center.

Microsoft Corporation

Published: March 2010

For many Web developers, the big news regarding Internet Explorer 8 and standards compliance was full support for the Cascading Style Sheet (CSS) 2.1 standard from the World Wide Web Consortium (W3C). However, Internet Explorer 8 also supports selected features from a variety of emerging standards including CSS3, HTML5, and others. This article briefly describes these features, provides example code, and links to additional information.

This topic contains the following sections:

Please note that, unless specified otherwise, these features are only available when web pages are displayed in IE8 Standards Mode. For more information, please see Understanding Document Compatibility.

Also, be aware that the standards mentioned in this article were still under development when Internet Explorer 8 was released. As a result, it's possible that the status of the standard may have changed, e.g. it may no longer be under development. Likewise, the standardized behavior of the features described in the article may be different in the current version of the corresponding specification. For more information, please consult the current version of the relevant standard.

DOM Storage

DOM Storage allows Web pages to store data on the client computer. Data can be saved for the current browser session or persist between multiple sessions. DOM Storage provides a consistent and predictable experience between different browsers.

The following example shows how to save and retrieve values using DOM storage.

<script type="text/javascript">

    var key1 = 'defaultkey';

    function getValue()
    {
        // Create object to initialize store.
        // Retrieve value string for a given key.
        var storeditem = localStorage.getItem(key1);
        if(storeditem != null)
        {
           document.getElementById('textinput').value = storeditem;
        }
    }

    function setValue()
    {
        var itemindex = document.getElementById('textinput').value;
        alert(itemindex);
        // Store a key-value pair.
        localStorage.setItem(key1,itemindex);

    }
    function clearItems()
    {
        // Clear all items in the local store.
        localStorage.clear();
    }

    function clear_text()
    {
        document.getElementById('textinput').value = '';
    }

    </script>

DOM Storage is defined as part of the W3C Web Storage specification and is available to all document compatibility modes supported by Internet Explorer 8. For more information about Internet Explorer's implementation of DOM Storage, see Introduction to DOM Storage.

Native JSON

Internet Explorer 8 includes a native (intrinsic) object that provides methods to convert JavaScript values to and from the JavaScript Object Notation (JSON) format. The JSON.stringify method serializes a JavaScript value to JSON text. The JSON.parse method deserializes JSON text to produce a JavaScript value.

The following example demonstrates how the native JSON object can be combined with the localStorage method of DOM Storage to save information entered into an HTML form. To see the example in action, see the Internet Explorer 8 Developer Demonstration site.

function storeRentalForm() {

  var formData = {};
  formData = getFormData();  // a function specified elsewhere
  formData = JSON.stringify(formData);
  localStorage.rentalForm = formData;
}

JSON is defined by RFC 4627. The native JSON methods are specified as part of the ECMAScript Language Specification, 5th Edition and are only available to Web pages displayed in IE8 standards mode. For more information, see the JSON Object (Windows Scripting - JScript) reference page.

AJAX Navigation

AJAX applications can update selected portions of a Web page without navigating to a new page. However, the lack of navigation means that users cannot use the Back and Forward buttons to return to previous versions of the Web page. Internet Explorer 8 treats updates to the window.location.hash property as navigations. In turn, this allows AJAX applications to use the hash property to provide a navigation path. Internet Explorer 8 also provides an onhashchange event that is fired when the hash property changes.

The following code sample shows one way an AJAX application can use the hash property to provide a navigation history.

<script type="text/javascript">
    var oMap = null;
    var iZoomLevel = 0;

    function GetMap()
    {
        oMap = new VEMap('myMap');
        oMap.LoadMap();

        oMap.AttachEvent("onendzoom", ZoomHandler);
        iZoomLevel = oMap.GetZoomLevel();
        window.location.hash = iZoomLevel;
    }

    function ZoomHandler(e)
    {
        iZoomLevel = oMap.GetZoomLevel();

        // The following declaration sets the hash property to a variable
        // containing the URL fragment to be saved.
        window.location.hash = iZoomLevel;
    }

    function HashChangeHandler()
    {
        var hash = window.location.hash;
        var iNewZoomLevel = hash.substr(1);

        if (iNewZoomLevel != iZoomLevel)
        {
            iZoomLevel = iNewZoomLevel;
            oMap.SetZoomLevel(iNewZoomLevel);
        }
    }
    </script>

The HTML5 specification describes the navigation behavior of the hash property and the onhashchange event. For more information, please see Introducing AJAX Navigations.

Cross-domain Requests

For security reasons, many Web browsers prevent Web pages from directly loading content hosted on a different domain. Internet Explorer 8 supports the Access-Control-Allow-Origin header, which allows Web pages to access content stored on Web servers willing to share resources.

A Web page can use an XDomainRequest object to request permission to access another site's resources, as shown in the following code sample.

function req_init()
{
    var url =
    document.getElementById('input_url').value;
    var timeout =
        document.getElementById('input_timeout').value;
    if (window.XDomainRequest) // Check whether the browser supports XDR.
    {
        xdr = new XDomainRequest(); // Create a new XDR object.
        if (xdr)
        {
            // Assign functions to handle various events and conditions.
            xdr.onerror     = alert_error;
            xdr.ontimeout   = alert_timeout;
            xdr.onprogress  = alert_progress;
            xdr.onload      = alert_loaded;
            xdr.timeout     = timeout;
            xdr.open("get", url);
            xdr.send();
        }
        else
        {
            alert('Failed to create new XDR object.');
        }
    }
    else
    {
        alert('XDR does not exist.');
    }
}

When Internet Explorer 8 sends the request, the target Web server uses the Access-Control-Allow-Origin header to grant or deny the permission. The requesting Web page then evaluates the response accordingly, as shown in the following code sample.

<script type="text/javascript">
  var xdr;

  function read_data()
  {
    var output = document.getElementById('text_response');
    if(output)
    {
      output.innerText = xdr.responseText;
    }
    alert("Content-type: " + xdr.contentType);
    alert("Length: " + xdr.responseText.length);
  }
</script>

The Access-Control-Allow-Origin header is defined as part of the Cross-Origin Resource Sharing specification from the W3C Web Application Working Group. For more information, see Introducing Cross-domain Request.

Cross Document Messaging

Cross-document Messaging (XDM) allows different domains to communicate through mutual content. The postMessage method allows cooperative communication between untrusted modules from different domains embedded within a page. It does so by ensuring a consistent and secure process for text-based data exchange.

The following code sample shows how to use postMessage.

var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello World');

When a script invokes this method on a window object, the browser sends an onmessage event to the target document on which the data property has been set to the value passed in the msg parameter. The following code sample shows one way to handle the message.

window.attachEvent('onmessage',function(e) {
    if (e.domain == 'example.com') {
        if (e.data == 'Hello World') {
            e.source.postMessage('Hello');
        } else {
            alert(e.data);
        }
    }
});

The postMessage method and the message event are both specified as part of the HTML5 Web Messaging module. These features are supported only for Web pages displayed in IE8 standards mode. For more informstion, see Introduction to Cross Document Messaging.

CSS3 Features

Unlink the CSS 2.1 Specification, CSS3 consists of multiple specifications and modules. Internet Explorer 8 supports a variety of features from several of these specifications, as shown in the following list.

Unless otherwise specified on the corresponding reference pages, CSS3 features are only available to Web pages displayed in IE8 standards mode.

The following example demonstrates the box-sizing attribute.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="x-ua-compatible" content="ie=8">
  <title>Box Sizing Sample</title>

  <style>
    div {
       background-color : #ccffff;
       padding : 5px;
       border : 1px;
       border-style : solid;
       height : 60px;
       width : 100px;
    }
    .box1 { box-sizing: content-box; }
    .box2 { box-sizing: border-box; }
</style>
  </head>
  <body>

<p>
  <div class="box1">This box uses the content-box style.</div>
  <br />
  <div class="box2">This box uses the border-box style.</div>
<p>

</body>
</html>

Mutable DOM Prototypes

Mutable DOM Prototypes allow you to manipulate and extend the functionality of Document Object Model (DOM) objects.

The following code sample uses Mutable DOM Prototypes to define a getElementsByClassName() function for the document object and DOM objects derived from the Element prototype.

function _MS_HTML5_getElementsByClassName(classList)
{
  var tokens = classList.split(" ");
  // Pre-fill the list with the results of the first token search.
  var staticNodeList = this.querySelectorAll("." + tokens[0]);
  // Start the iterator at 1 because the first match is already collected.

  for (var i = 1; i < tokens.length; i++)
  {
    // Search for each token independently
    var tempList = this.querySelectorAll("." + tokens[i]);
    // Collects the "keepers" between loop iterations
    var resultList = new Array();

    for (var finalIter = 0; finalIter < staticNodeList.length; finalIter++)
    {
      var found = false;
      for (var tempIter = 0; tempIter < tempList.length; tempIter++)
      {
        if (staticNodeList[finalIter] == tempList[tempIter])
        {
          found = true;
          break; // Early termination if found
        }
      }

      if (found)
      {
         // This element was in both lists, it should be perpetuated
         // into the next round of token checking...
         resultList.push(staticNodeList[finalIter]);
      }
    }
    staticNodeList = resultList; // Copy the AND results for the next token
  }
  return staticNodeList;
}
HTMLDocument.prototype.getElementsByClassName = _MS_HTML5_getElementsByClassName;
Element.prototype.getElementsByClassName = _MS_HTML5_getElementsByClassName;

Mutable DOM Prototypes are specified in the W3C Web IDL Specification. Mutable DOM Prototypes are only supported on Web pages displayed in IE8 Standards mode. For more information, see Document Object Model Prototypes, Part 1, Document Object Model Prototypes, Part 2, and Mutable DOM Prototypes (video).

DataURI

Data URI's allow you to specify images as character encoded text values in HTML attribute values or CSS rules.

The following code sample shows how to use the data protocol to specify an inline image.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAI
AAAFSDNYfAAAAaklEQVR42u3XQQrAIAwAQeP%2F%2F6wf8CJBJTK9lnQ7FpHGaOurt1
I34nfH9pMMZAZ8BwMGEvvh%2BBsJCAgICLwIOA8EBAQEBAQEBAQEBK79H5RfIQAAAAA
AAAAAAAAAAAAAAAAAAAAAAID%2FABMSqAfj%2FsLmvAAAAABJRU5ErkJggg%3D%3D">

Data URI's are defined by RFC 2397; Internet Explorer 8 supports DataURI's in all document compatibility modes. For more information, see Data Protocol.

Selectors API

The Selectors API allows you to search the content of a Web page and return a collection of elements that match criteria defined by CSS rule grammar. The Selector API provides greater performance over older techniques.

The following code sample shows how to use the Selector API to select span elements nested inside a p element.

<html>
<head>
   <meta http-quiv="X-UA-Compatible" content="IE=8">
   <title>Limit Example 1</title>
<head>
<body>

  <p>
    <div name="div1"><span name="span1">Found</span></div>
    <div name="div2"><span name="span2">Not found</span></div>
  </p>

  <script>
  function Sample()
  {
     var oDiv = document.getElementByName( "div1" );
     var oSpan = oDiv.querySelector( "p span" );
     var sResult = ( oSpan == null ) ?
       "No match found; check your query" : "The query returned " + oSpan.name;
     alert( sResult );
  }
  </script>
  <button onclick="Sample();">Run Test</button>
</body>
</html>

The Selectors API is defined as part of the Selectors API specification and is only available to Web pages displayed in IE8 standards mode. For more information, see Selecting Objects with JavaScript.

DOM/Content Attributes

While there are similarities between the names of many HTML element attributes and corresponding Document Object Model (DOM) object properties, the two values can (and frequently are) different for a number of reasons. The HTML attribute value is the value specified by the author of a Web page and the DOM property value represents the browser's representation of that value.

The following example demonstrates the differences between these terms. The attribute value on the body element defines the content attribute and the alert method in the script displays the DOM attribute. When you run this example and click the button, the alert dialog box displays the fully qualified path name to the background image.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
   <title>Content/DOM Attribute Sample</title>
   <meta http-equiv="x-ua-compatible" content="ie=8">

   <script language="javascript">
   function showBkgdPath()
   {
      // This is the DOM attribute
      alert( document.body.background );
   }
   </script>
</head>
<!-- This defines the content attribute -->
<body background="background1.png">

<p><button onclick="showBkgdPath();">Click me</button></p>

</body>
</html>

The HTML5 specification formalizes these differences. Attribute values specified in the markup of a Web page are called content attributes and object properties are called DOM Attributes. For more information, see Attribute Differences in Internet Explorer 8. Attribute differences are only supported when Web pages are displayed in IE8 Standards mode.

Summary

Internet Explorer 8 provides a wide range of support for a variety of established standards. It also supports selected features from standards that were still under development at the time Internet Explorer 8 was released. This article summarized these features and provided links to additional information.

Show:
© 2015 Microsoft