Click here to Skip to main content
Click here to Skip to main content

Easier Way to Test IE Compatibility (pre IE9.x) w/ app

, 15 Jul 2014
Rate this:
Please Sign up or sign in to vote.
Attempt to make cross-browser compatible JavaScript dev easier.

Introduction

If you only have IE 9.x (or now 10.x) on your computer, it can be quite painful to insure your web site which includes JavaScript is compatible with older versions (IE8.x and before).

Note: While writing this article, IE 10.x released and I upgraded to it. So far, I find it to be far superior to 9.x

Background

I have IE 9.x on my computer, but I am doing some web development with pure JavaScript and I really want to know if my JavaScript will work on IE 8.x and before. It's a learning thing. Anyway, I thought of a way to provide an IE Compatibility test which should be very close, if not perfect, to actually running a copy of IE 7.x. How about IE 8.x. Well, yes, errr...uhh... you'll have to see what I mean, because there is quite a bit of weirdness involved. Now, here's how I do it, using .NET.

You'll be amazed at the terrible weirdness I've uncovered while doing the work. You will be amazed. You will. Now, be amazed! Smile | <img src= I know. Nothing is amazing any more, because everything's on the Internet.

My First Thought

My first thought is to write a program in C# which implements the WebBrowser control. Easy squeezy lemon peezy. This isn't just laziness. Not just. Smile | <img src= At this point in our conversation I'd like to alter Occam's Razor for Software Developers. The original philosophy leads us to something like: "when you have two competing theories that make exactly the same predictions, the simpler one is the better." I got that quote at : http://math.ucr.edu/home/baez/physics/General/occam.html which was last updated in 1997.

Occam's Razor For Developers

We Software Developers should say, "when you have two (or more) competing methods in which you could develop the exact same solution , the simpler one is better."

Okay, so create a form and throw a WebBrowser control on there. The WebBrowser control is built into Visual Studio and it just works -- whatever that means. Setting that up in Visual Studio (2010) looks something like the following:

If you need to add the Web Browser Control to your toolbox, you right-click the toolbox list and then it looks something like this:

adding the web browser component

My Compatibility Test App

Here's what the quick and ugly form I created looks like:

Gratuitous Self Promotion?

Yes, as you can see I've included some gratuitous self promotion here, by displaying my web site as the main page of the IE Compatibility Test app. However, there is a reason for that: The web browser control has to have a page loaded so that I can run JavaScript from the navbar element (see the next image to see what I mean). If a page isn't loaded you get an odd error where it says it cannot navigate to the location.

JavaScript Protocol?

That's right, if you type javascript: followed by any valid JavaScript, then the web browser control will run that code. This is true for an actual copy of IE also. You can try it now from your copy of IE, just make sure that you navigate to a valid web site and then try your JavaScript.

javascript protocol

I'll show you why that is important along with explaining what all those buttons on my form do. I'll also explain some of the challenges and weirdness of attempting to get the Web Browser control to emulate older browsers.

What Do All Those Buttons Do?

To explain the buttons I've added a table below which shows you the text of each button and the function that each button carries out.

Button Text functionality
Go __Navigates to the URL which is typed into the top edit box
Check Version __Displays the version of the Web Browser control using webcontrol.version: however, it always displays the version of the browser currently installed on your machine, not the compatibility version that is running.
Check Ver (JS) __Runs a script to get the value of navigator.userAgent. Displays the compatibility mode version that the browser control is running in.
Create Reg Item __Creates a registry entry (requires IECompat app. to be running as admin) which will force the browser into an alternate compatibility mode -- version of IE such as 7.x even though you are running IE 9.x on your computer.**
addEventListener? __This runs another script to determine if the browser control believes the window.addEventListener method is defined. This method is NOT defined for older IE versions (8.x and before). 9.x and 10.x do support addEventListener. This makes it a good candidate for determine the compatibility mode of the browser control.
Restart! __This button will Restart the IECompatTest app for you (closing the currently running instance). Once you use the Create Reg Item to create/add the new value -- to alter the Compatibility mode of the browser control -- you have to restart the app. to see the new compatibility mode. That is because when the app. starts it reads the registry entry to determine the compatibility mode it should run in.**

** The two items in the table marked with double-asterisk are dependent upon the information I found at the MSDN blog shown in the next section. That entry explains Microsoft's official stance on how the Compatibility mode and their Web Browser control (supposedly) work.

Stumbled Upon This Blog Entry

http://blogs.msdn.com/b/ie/archive/2009/03/10/more-ie8-extensibility-improvements.aspx

Registry Entry? Really?

Basically, the article says if you add a registry entry which references an executable which uses the Web Browser Control, then it will force the Web Browser Control into a specific version.

The registry entry which is added/altered is:

[(HKEY_CURRENT_USER or HKEY_LOCAL_MACHINE)\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION\ with a key value of

MyApplication.exe = <int value>

You can see the code I used to add/alter this value on the mainform. It looks like this:

void CreateRegItemButtonClick(object sender, EventArgs e) 
{
    try
    {
        Int32 val = Convert.ToInt32(RegItemTextBox.Text);
        Microsoft.Win32.RegistryKey key;
        key = Microsoft.Win32.Registry.CurrentUser.OpenSubKey(
                   @"Software\Microsoft\Internet Explorer\Main\FeatureControl\", true);
        
        key = key.CreateSubKey(@"FEATURE_BROWSER_EMULATION",RegistryKeyPermissionCheck.ReadWriteSubTree);
        if (key != null)
        {
            MessageBox.Show("The key has been altered. Restart the app. to see the changes.");
            
        }
          //CreateSubKey("FeatureControl");
        key.SetValue("IECompatTest.exe", val , Microsoft.Win32.RegistryValueKind.DWord);
        key.Close();
    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.Message + " " + ex.StackTrace);
    }    
}

The MSDN article then goes on to explain the various values which will force the control into specific IE versions.

However, most of it is lies. Smile | <img src= I could only get the thing to go into IE 7.x mode, using the settings I show in the (2nd) screenshot below.

Now, for brevity, I'll show you two screenshots when running on Win 7 with IE 9.x

First, the natural state of the Web Browser Control running in IE 9.x

Note: addEventListener is supported

Last, the Web Browser Control forced into IE 7.x Mode

Note: addEventListener is no longer supported.

Steps To Use the IECompatTest To Test Your Site's Compatibility

First I'll give you the steps, then I'll show you each step in a series of images.

  1. Start IECompatTest and check the version of IE installed by pressing the [Check Version] button.
  2. In our case we'll change the version to IE 7.x so type the value 7000 into the bottom edit box and press the [Create Reg Item] button. This will add the registry value, but now the application needs to be restarted.
  3. Click the [Restart!] button and the IECompatTest application will close and start again.
  4. Click the [Check Ver (JS)] button to check the navigator.userAgent value. Remember, the [Check Version] button will always return the version of the installed IE, not the compatibility mode.
  5. Now, you can type your URL into the top edit box and click the [Go] button. Your page will be loaded and the browser will run as if it is IE 7.x.

Extra: You can also click the [addEventListener?] button to insure it is in 7.x mode, since that method is NOT supported by 7.x

Step 1

Step 2

Steps 3 / 4

Step 5

Try It Out and Comment

Try it out and see what you think. All this IE compatibility mode stuff is extremely frustrating for web developers and I thought I might just attempt to sort out some of it and provide a resource. Hope this article has helped in some way.

History

  • First release: April 23, 2013

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

newton.saber
Architect
United States United States
My newest book is Object-Oriented JavaScript (See it at Amazon.com)
 
My book, Learn JavaScript - amazon.com link is available at Amazon.
 
My upcoming book, Learn AngularJS - Think AngularJS, will be reeleasing in January 2014.
 
You can learn more about me and my other books, at, NewtonSaber.com
Follow on   Twitter

Comments and Discussions

 
QuestionCode Download: Not showing up Pinmembernewton.saber23-Apr-13 10:50 
FYI -- I uploaded the code and sample .exe, but it is not showing up.
You can browse the code, but for whatever reason the download isn't available.
I'll report the issue and make it available as soon as possible.
Thanks,
~Newton
AnswerRe: Code Download: Not showing up Pinmembernewton.saber24-Apr-13 3:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 15 Jul 2014
Article Copyright 2014 by newton.saber
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid