Web Browser Control & Specifying IE version
I used web browser control to display some of the web applications at desktop applications. Basically this approach we used to display the rich appearance of UI with data entry controls , labels and other styles with better look.Even in desktop applications, is often way easier than using labels or edit boxes or even some of the WPF text containers. HTML is easy to generate, generally re-usable, and easily extensible and distributed. The Web Browser Control allows for an effective way to display HTML in your applications in a way that blends in and becomes part of your application.
But there is a limitation with Web Browser Control that is - by default - Itstuck in IE 7 rendering mode. Even though we're now up to IE 11 and a reasonably HTML5 compatible browser, the Web Browser Control always uses the IE 7 rendering engine by default. This is because the original versions of the ActiveX control used this mode and for backwards compatibility the Control continues this outdated and very HTML5 unfriendly default.
This applies whether you’re using the Web Browser control in a WPF application, a WinForms app. Behind the scenes all these UI platforms use the same COM interfaces and so you’re stuck with those same rules.
There is an alternative approaches are there to override the default rendering behavior:
- Using the IE
X-UA-CompatibleMeta header - Using Application specific
FEATURE_BROWSER_EMULATIONRegistry Keys
Using the X-UA-Compatible HTML Meta Tag
If you control the content in your Web Browser control by rendering the HTML pages you display yourself, the easiest way to provide later versions of the IE rendering engine is by using the IE Edge mode header. By adding a meta tag to the head of the HTML document rendered in the Web Browser Control you can effectively override the IE Rendering engine and specify which version of IE (or the latest version) to use.
The tag to use in the header looks like this:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Inside of a full document it looks like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
... other headers
</head>
<body>
... content
</body>
</html>
Note the header should be the first header so that the engine is applied before any other headers are processed.
In this case
IE=edge uses the current version of IE that is installed on the machine. So if you have IE 11 installed that's used, if IE 10 is installed that's used.
You can also specify a specific version of IE:
<meta http-equiv="X-UA-Compatible" content="IE=10" />
For info on all the modes available see this StackOverflow answer.
Alternately you can also serve
X-UA-Compatible: IE=edge as a raw HTTP header from a Web server, which has the same behavior as the http-equiv meta header.Caveats with the Edge Mode Header
There are a few things you need in order to use the meta tag and make it work properly:
- You have to control the Page
In order to add the<meta>tag you have to control the page so that you can add the<meta>tag into your HTML. If you're rendering arbitrary HTML that doesn't include the tag, then this approach won't work obviously. Typically the header approach works great if you generate your own content. - Browser Version Reporting is incorrect
The<meta>tag changes the rendering engine behavior that IE uses, but it doesn't change the way that IE reports its version. If you access pages that do IE version checking you'll find that it still points at IE 7 (or sometime some custom browser version) that doesn't reflect the current rendering mode. If you're running script code that may rely on browser sniffing this can become a problem. I ran into this recently with Ace Editor, which has a couple of odd places where it uses browser sniffing for dealing with the clipboard, and that code wouldn't work. This is likely an edge (ha ha) case, but be aware that this can become a problem.
Feature Delegation via Registry Hacks
Another and perhaps more robust way to affect the Web Browser Control version is by using
FEATURE_BROWSER_EMULATION. Starting with IE 8 Microsoft introduced registry entries that control browser behavior when a Web Browser Control is embedded into other applications. These registry values are used by many application on your system.
Essentially you can specify a registry with the name of your Executable and specify the version of IE that you would like to load. The numbers are specified as 11000, 10000, 9000, 8000 and 7000. The keys can be specified either for the current user (HKCU) or globally for all users (HKLM).
Here's what I have in my HKCU key:
Notice some big applications like Visual Studio and Outlook use these overrides and at the HKLM keys you will also find apps like Skype SnagIt, Fiddler, SourceTree, 1Password and the Windows Help Viewer to name a few. So this feature is actually used by a wide range of popular software.
Registry Key Location for FEATURE_BROWSER EMULATION
You can specify these keys in the registry at:
HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
The HKCU key is the best place to set these values because there's a single key and it can be set without admin rights, but you can also set these keys at the machine level at HKLM:
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION
or for a 32 bit application on a 64 bit machine:
HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
Key Name
The keyname is the EXE name of your application like:
- Zoom.exe
- devenv.exe
Values
The value specifies the IE version as follows:
The value to set this key to is as decimal values:
11001 (0x2AF9)
Internet Explorer 11. Webpages are displayed in IE11 Standards mode, regardless of the !DOCTYPE directive.
Internet Explorer 11. Webpages are displayed in IE11 Standards mode, regardless of the !DOCTYPE directive.
11000 (0x2AF8)
Internet Explorer 11. Webpages containing standards-based !DOCTYPE directives are displayed in IE11 mode.
Internet Explorer 11. Webpages containing standards-based !DOCTYPE directives are displayed in IE11 mode.
10001 (0x2AF7)
Internet Explorer 10. Webpages are displayed in IE10 Standards mode, regardless of the !DOCTYPE directive.
Internet Explorer 10. Webpages are displayed in IE10 Standards mode, regardless of the !DOCTYPE directive.
10000 (0x2710)
Internet Explorer 10. Webpages containing standards-based !DOCTYPE directives are displayed in IE10 mode.
Internet Explorer 10. Webpages containing standards-based !DOCTYPE directives are displayed in IE10 mode.
9999 (0x270F)
Internet Explorer 9. Webpages are displayed in IE9 Standards mode, regardless of the !DOCTYPE directive.
Internet Explorer 9. Webpages are displayed in IE9 Standards mode, regardless of the !DOCTYPE directive.
9000 (0x2328)
Internet Explorer 9. Webpages containing standards-based !DOCTYPE directives are displayed in IE9 mode.
Internet Explorer 9. Webpages containing standards-based !DOCTYPE directives are displayed in IE9 mode.
8888 (0x22B8)
Webpages are displayed in IE8 Standards mode, regardless of the !DOCTYPE directive.
Webpages are displayed in IE8 Standards mode, regardless of the !DOCTYPE directive.
8000 (0x1F40)
Webpages containing standards-based !DOCTYPE directives are displayed in IE8 mode.
Webpages containing standards-based !DOCTYPE directives are displayed in IE8 mode.
7000 (0x1B58)
Web pages containing standards-based !DOCTYPE directives are displayed in IE7 Standards mode.
Web pages containing standards-based !DOCTYPE directives are displayed in IE7 Standards mode.
This mode is kind of pointless since it's the default.
Setting these keys enables your applications to use the latest Internet Explorer versions on your machine easily. Unfortunately there doesn't seem to be a key that says use the latest version that's installed - you have to be specific regarding the version unfortunately. Given that Windows 7 and later can run IE 11.
Comments
Post a Comment