Share via

IE9’s Document Modes and JavaScript

  • Article

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

Comments

  • Anonymous
    March 24, 2011
    The comment has been removed

  • Anonymous
    March 24, 2011
    Hey Steve, wanna complain about Spoon again too?  Missed your enlightened comments recently.

  • Anonymous
    March 24, 2011
    The comment has been removed

  • Anonymous
    March 24, 2011
    @another trolling whiner - I'm not the Steve you are thinking about.  I've never used Spoon.

  • Anonymous
    March 24, 2011
    @Steve: We're not able to reproduce any problem in this area. If you have a URL to repro, we'd very much like to have a look. Thanks!

  • Anonymous
    March 24, 2011
    @Steve: For your graphics issue, please provide the information about your graphics card and driver from the DXDIAG tool.

  • Anonymous
    March 24, 2011
    @Steve: You can also email an example HTML file to us using the Email Blog Author link in the Common Tasks section at the top right of this blog.

  • Anonymous
    March 24, 2011
    ok, running the DXDIAG tool (will send results when done via the email blog author link)... By the way, can you enhance the IE blog contact form to include an attachment option?  Likewise I don't see a "submit bug report" option in IE9 itself. In the mean time I'll see if I can host the files somewhere and send a link.

  • Anonymous
    March 24, 2011
    @Steve, just send a mail, I'll reply, and then you can reply with an attachment. As you noted, there's no submit bug report or send feedback link in the final build of IE9. Bugs can be filed at connect.microsoft.com/ie

  • Anonymous
    March 24, 2011
    The comment has been removed

  • Anonymous
    March 24, 2011
    @steve: Your repro file shows that the script is executing; your result is overwritten onload as the Intelliforms feature restores the text in the form. @florin: I don't see anything approaching 80% utilization, but if you watch the network traffic, the techcrunch homepage is doing some very "interesting" things.

  • Anonymous
    March 24, 2011
    my machine is slow (core 2 ulv 1.4 ghz) but this site makes the whole thing unresponsive. i feel this will keep happening, web people in general have no idea or don't care, so maybe there ought to be some checks on cpu use.

  • Anonymous
    March 24, 2011
    @EricLaw: What do you mean by "interesting things" in "but if you watch the network traffic, the techcrunch homepage is doing some very "interesting" things."? Do you mind explaining it?

  • Anonymous
    March 24, 2011
    IE team why do you like playing around the UI as it were a game? In your stupid redesign of the download manager, you removed the amount of MB downloaded. Now when I try to download large files like 300MB+, the % doesn't move and I don't see whether the download the progressing or stuck because the MB completed is gone. Whoever re-designed the download manager did a very lousy job by carelessly dropping info that the old download window displayed. Not being able to view completed MB is so annoying I uninstalled IE9 at least one of my computers where I download plenty of stuff. Replacing carefully designed UI with badly designed ones seems to be the trend at Microsoft.

  • Anonymous
    March 25, 2011
    Maximillian, they hit twitter service every millisecond. No wonder it's slow on old computers.

  • Anonymous
    March 25, 2011
    UPD: after trying to close the window with techcrunch.com I got multiple respawns and some of the processes used about gig worth of memory. I'm glad IE9 joined the rest of the browsers and splits tabs into processes. I just killed the offending processes and everything got back to normal. Techcrunch is a mess.

  • Anonymous
    March 25, 2011
    Why would the Techcrunch site go to twitter every millisecond???

  • Anonymous
    March 25, 2011
    Why wouldn't you open the site yourself in IE9, press F12 and enable Network capture?? But, here is a snapshot about 30 seconds since the site loaded. Notice the Received traffic number and it kept on counting! img130.imageshack.us/.../techcrunchie9.png

  • Anonymous
    March 25, 2011
    The comment has been removed

  • Anonymous
    March 25, 2011
    @Maximillian - TechCrunch loads an ABSURD amount of content for their home page.... 2.4MB!!!! - dozens of separate Digg/Facebook/Twitter widgets and more tracking JS than I've ever seen... YSlow rates it a "D".

  • Anonymous
    March 25, 2011
    Maybe TechCrunch is really just a front for a DDOS on Twitter... (j/k)

  • Anonymous
    March 25, 2011
    @blaine Shouldn't IE9's TPL list block a lot of that tracking JS *** ?

  • Anonymous
    March 25, 2011
    I have come across a web site which has been designed to run in IE6/7. So, it's broken in IE9. By default it displays the page in Quirks Mode. If I select IE9 Standards Mode, then it displays perfectly. But how do I permanently make that site render in IE9 Mode? And also where can I report that broken site? The site is: http://forum.projanmo.com

  • Anonymous
    March 26, 2011
    The comment has been removed

  • Anonymous
    March 26, 2011
    The comment has been removed

  • Anonymous
    March 26, 2011
    i swear that blog did look less 90s for a momento. looking forward for permanent change. btw, thanks for IE9. it works.

  • Anonymous
    March 26, 2011
    Start developing Internet Explorer 10, IE should have a much shorter development cycle!

  • Anonymous
    March 27, 2011
    I have two IE9 issue in Windows Vista Ultimate.

  1. In Pop-up Blocker settings the "Play a sound when a pop-up is blocked" option is greyed out so i can't change the settings.
  2. In Feed and Web Slice Settings "Play a sound when a feed or web slice is found for a webpage" and "Play a sound when a monitored feed or Web slice is update is greyed out and i can't change the settings. Is this Normal? if not then How do I fix the issues?

  • Anonymous
    March 27, 2011
    Does IE9 standards mode fully support innerHTML setters? These were not fully supported in IE7 or IE8. IIRC this was something to do with the old HTML parser IE uses to build DOM structures. Can we presume correctly that IE9 got rid of this and built/used a new one?

  • Anonymous
    March 27, 2011
    @Eduardo Valencia: Be sure they did long ago!

  • Anonymous
    March 28, 2011
    Regarding sam's comment.  Here is an interesting article on the topic of innerHTML not being fully supported in IE:  www.ericvasilik.com/.../code-karma.html

  • Anonymous
    March 28, 2011
    Here's a blog about using the meta tag correctly in order to switch to other doc standards: evolpin.wordpress.com/.../ie9-compatibility-and-the-meta-tag

  • Anonymous
    March 28, 2011
    Any information on how standard mode is selected when an HTML page is loaded within an WebBrowser control? It seems to default to quirks regardless...?

  • Anonymous
    April 05, 2011
    @Thomas - WebOCs need to use feature control keys for switching modes. See msdn.microsoft.com/.../ee330730(v=VS.85).aspx for details.Use: 9999 to force IE9 Standards Mode 9000 to emulate IE9 mode – looks at doctype

  • Anonymous
    April 05, 2011
    thanks