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

Comments (35)

  1. steve says:

    Reporting an IE9 bug here until Bug Tracking is sorted out.

    IE9 doesn't handle PNG images with alpha transparency that are wider than 1280px (possibly less) as a repeating background over a solid color.

    When the IE window is sized to ~1024px, the image renders correctly however when resized wider than that, the image fails to apply black semi-transparent color in EACH occurrence of the tiling approximately 800px into the image (from the left)

    The image (and tiling) works perfectly fine in Firefox 3, & 4, Opera, Safari, Chrome and IE7 & IE8.

    PS The font rendering sucks too – but I won't bother re-submitting that bug report

  2. another trolling whiner says:

    Hey Steve, wanna complain about Spoon again too?  Missed your enlightened comments recently.

  3. steve says:

    Reporting an IE9 bug here until Bug Tracking is sorted out.

    IE9 does not re-run ANONYMOUS scripts when F5 or [CTRL]+[R]  is pressed or or Menu > View > Refresh is clicked.

    Scripts that are not in an ANONYMOUS script block DO EXECUTE on all refreshes (F5, CTRL + F5, CTRL + [R])

    As always – ALL other browsers have NO ISSUE WHATSOEVER RE-Running the code.

    Not to be a pain – but my testing thus far is showing IE9 RTM to be very much a "Beta" release – Not impressed at all.

  4. steve says:

    @another trolling whiner – I'm not the Steve you are thinking about.  I've never used Spoon.

  5. EricLaw says:

    @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!

  6. EricLaw says:

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

  7. ieblog says:

    @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.

  8. steve says:

    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.

  9. ieblog says:

    @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

  10. florin says:

    please notice that ie9 has a major problem with techcrunch.com, cpu utilisation stays at 80%+ (2 cores), memory keeps leaking. the problem did not happen before, problem is major, ie major site is unusable. (may/may not have to do with flash not being installed)

  11. EricLaw says:

    @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.

  12. florin says:

    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.

  13. mahara says:

    @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?

  14. tuxplorer says:

    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.

  15. Roman says:

    Maximillian, they hit twitter service every millisecond. No wonder it's slow on old computers.

  16. Roman says:

    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.

  17. hAl says:

    Why would the Techcrunch site go to twitter every millisecond???

  18. hAl says:

    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

  19. Roman says:

    Oops, I put your name in the wrong box. The above comment is mine.

  20. blaine says:

    @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".

  21. willpeavy.com says:

    Maybe TechCrunch is really just a front for a DDOS on Twitter… (j/k)

  22. hAl says:

    @blaine

    Shouldn't IE9's TPL list block a lot of that tracking JS *** ?

  23. Jason says:

    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

  24. CvP says:

    @Jason

    Ask the site developer to add this after <head>

    <meta http-equiv="X-UA-Compatible" content="IE=9">

  25. hAl says:

    Viewing the network traffic is interesting.

    I for instance noticed the IE blog frontpage downloading 2 video files.

    I do not like blog frontpages downloading videos which mostly will belong to older blogpost.

    Also I know visited this frontpage daily so aI am wondering why the IE blog is not cashing these videos but redownloading them over and over agian.

    It is also amazing how many sites have filled up their pages with Twitter and facebook crap code slowing down pageloading.

  26. giuseppe [OT] says:

    i swear that blog did look less 90s for a momento. looking forward for permanent change.

    btw, thanks for IE9. it works.

  27. Eduardo Valencia says:

    Start developing Internet Explorer 10, IE should have a much shorter development cycle!

  28. Si55y says:

    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?

  29. sam says:

    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?

  30. Ooh says:

    @Eduardo Valencia: Be sure they did long ago!

  31. DannyMeister says:

    Regarding sam's comment.  Here is an interesting article on the topic of innerHTML not being fully supported in IE:  http://www.ericvasilik.com/…/code-karma.html

  32. ewolfman says:

    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

  33. Thomas Thomassen says:

    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…?

  34. @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

  35. abid hossen says:

    thanks