Internet Explorer 9 standards document mode enables the same markup and same script to work across browsers. You should use Internet Explorer 9 standards document mode to take advantage of new features in the ECMAScript, Fifth Edition standard (ES5) and IE9’s enhanced DOM programmability. However, to maintain fidelity with older versions of IE, the JavaScript functionality supported in IE9’s Quirks mode, IE7 standards mode, and IE8 standards mode differs somewhat from IE9 standards mode. You can use these compatibility modes and the F12 developer tools to migrate your site to use the new ES5 features on your own schedule, while your site continues to run in IE9.
In two blog posts – Testing sites with Browser Mode vs. Doc Mode and IE’s Compatibility Features for Site Developers – Marc Silbey explains how to take advantage of document modes in Internet Explorer 9. He also discusses how to use Browser Mode and Document Mode to test sites for IE9 and previous IE versions. In this post, we’ll explore what developers need to know about how the document modes in IE9 affect JavaScript code.
Document Modes and JavaScript Support
As mentioned in a previous post, you (the developer) control the document mode that IE will use when rendering your site by using the DOCTYPE and X-UA-Compatible Meta tag or HTTP Header. Chakra, the new JavaScript engine in IE9, uses the document mode to determine the JavaScript features to support. The table below summarizes Chakra’s JavaScript support under the four IE9 document modes. For information on how to set the document mode, see our post on IE’s Compatibility Features for Site Developers and the Determining Document Mode diagram for IE9.
Document Mode Description IE9 standards IE9 standards document mode is the default if a Web page uses a standards-compliant DOCTYPE and doesn’t specify an X-UA-Compatible meta tag. In this mode, IE supports ECMAScript, Fifth Edition features, enhanced DOM programmability, and removes some of the key differences between our IE8 JavaScript implementation and the ECMAScript, Third Edition Specification. IE8 standards IE8 standards document mode supports the JavaScript additions we made in IE8 to implement portions of the then-draft ES5 standard, such as native JSON support and accessor support on DOM objects. This mode also supports the changes made in IE8 to fix some key issues raised by developers. IE7 standards IE7 standards document mode supports the JavaScript functionality that was available in IE7, including the Microsoft extensions supported in the IE7 standards mode in IE7 and IE8. Quirks Quirks mode supports the JavaScript functionality of IE6, and the Quirks mode of IE7 and IE8. Your JavaScript may behave differently in the different document modes. Here are three examples of code that, due to our conformance to the ES5 standard, provide different results depending upon the document mode. For additional compatibility guidance and JavaScript feature changes in IE9, see the Compatibility Cookbook on MSDN, the blog post Enhanced Scripting in IE9: ECMAScript 5 Support and More, the ES3 Standards Support document, and the Microsoft JScript extensions to the ES3 standard.
Arguments.caller
Arguments.caller is not supported in IE9 standards document mode, per ES5 section 10.6. Consequently, Quirks, Internet Explorer 7 standards, and Internet Explorer 8 standards document modes in IE9 alert “1” for the following code. Internet Explorer 9 standards mode issues the script error "Unable to get value of the property 'length': object is null or undefined."
function alertCallerLength() {
alert(arguments.caller.length); // IE9 standards doc mode issues script error
}
function callingFunction() {
alertCallerLength();
}
callingFunction(1)
Indirect Eval
The ES5 standard requires that indirect evals—invocations of eval() by using a name other than “eval”—resolve to a global scope rather than a local scope. To support compatibility with previous versions of IE, Quirks, IE7, and IE8 doc modes maintain a local scope for indirect evals, while IE9 standards mode interprets them according to the global scope.
var x = "Global Scope";
var myeval = eval;
function f() {
var x = "Local Scope";
alert(myeval("x"));
}
f(); // IE9 doc mode alerts "Global Scope"; other doc modes alert "Local Scope"
String objects
In IE8 and IE9, indexed properties can be added to string objects. With IE8 you can create these properties for all indexes regardless of the length of the string object. In IE9 you can create indexed properties, but only for indexes that are greater than the length of the string. IE9 will also give you indexed access to the string itself. In the example below, we create a String object and then attempt to define values for array indices of that object. IE8 and the IE9 compatibility document modes allow us to create an array object with the same variable name as a string object; IE9 standards mode does not. As a result, in IE9 standards mode, the function returns “H-e-l-l-o- -W-o-r-l-d.” In the other document modes, the function returns “-1----5----9-.”
function JoinDemo(){
var a = new String("Hello World");
a[1]="1";
a[5]="5";
a[9]="9";
alert(Array.prototype.join.call(a, "-"));
}
JoinDemo();
// IE9 standards doc mode alerts "H-e-l-l-o- -W-o-r-l-d"
// IE8, IE7, Quirks doc modes alert "-1----5----9-"
Testing JavaScript in Different Document Modes
As you migrate your site to IE9 standards doc mode, you may find that some of your script behaves differently than in Internet Explorer 8. The F12 developer tools in Internet Explorer 9 enable you to test your scripts in the four document modes. Changing the Document Mode through IE’s F12 developer tools refreshes the page and instructs the Chakra JavaScript engine to reparse the script according to the specified document mode. You can use these document modes to help debug your scripts as you migrate your code to IE9 standards mode.
Additional Information
We have made every effort to ensure that IE9’s compatibility document modes support the same functionality that we shipped for these modes in IE8. However, because the Chakra engine is not the same as we shipped in IE8, it is bound to have some differences. The Internet Explorer 9 Compatibility Cookbook explains some of these key differences. Briefly the following are affected:
If you encounter additional compatibility issues, we’d like to hear about them. Please send us your feedback via Connect.
- Enumeration order differs between IE8 and IE9.
- Internet Explorer 9 correctly handles array elements with large indices.
- Math precision differs between IE8 and IE9.
We’d also like to point you to some blog posts and IE Test Drive demos that we have created to explain or showcase the new functionality that Chakra introduces, and some differences from IE8.
In summary, IE9 supports different ECMAScript standards and extensions in different document modes. The new IE9 document mode allows you to take advantage of new ES5 features according to your schedule. We hope you find the F12 developer tools useful as you debug your code and migrate to the ES5 and HTML5 features supported in IE9 document mode.
- Enhanced Scripting in IE9: ECMAScript 5 Support and More describes the new ES5 features that are now available in Chakra and IE9.
- Exploring IE9's Enhanced DOM Capabilities explains the IE9 enhanced DOM programmability support, which brings DOM objects closer to native JavaScript objects. The Enhanced DOM Capabilities demo showcases these concepts.
- ECMAScript 5 Part 1: Reusable Code talks about the new JavaScript object model introduced by ES5 and how developers can use the new Object reflection features to develop controlled reusable components. The ECMAScript5 Breakout and Texas Hold’em demos also showcase some of these concepts.
- ECMAScript 5 Part 2: Array Extras talks about some of the common loops and array methods that are now implemented natively within Chakra. ECMAScript5 Tile Game and ECMAScript5 Arrays demo this functionality.
—Gaurav Seth and Paul Chapman, Program Managers, JavaScript
More...