IE9’s Document Modes and JavaScript

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.

Screen shot of F12 Developer Tools' Document Mode menu


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.

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.

—Gaurav Seth and Paul Chapman, Program Managers, JavaScript