I use the Internet Explorer
Web Browser Control
in a lot of my applications
to display document type layout. HTML happens
to be one of the most common document formats and displaying data
in this format – even
in desktop applications, is often way easier than using normal desktop technologies. One issue the
Web Browser Control has that it’s perpetually stuck
in IE 7 rendering mode by default. Even though IE 8 and now 9 have significantly upgraded the IE rendering engine
to be more CSS and HTML compliant by default the
Web Browser control will have none of it. IE 9
in particular – with its much improved CSS support and basic HTML 5 support is a big improvement and even though the IE control uses some of IE’s internal rendering technology it’s still stuck
in the old IE 7 rendering by default. This applies whether you’re using the
Web Browser control
in a WPF application, a WinForms app, a FoxPro or VB classic application using the ActiveX control. Behind the scenes all these UI platforms use the COM interfaces and so you’re stuck by those same rules. Rendering Challenged
To see what I’m talking about here are two screen shots rendering an HTML 5 doctype page that includes some CSS 3 functionality – rounded corners and border shadows - from an earlier post. One uses IE 9 as a standalone browser, and one uses a simple WPF form that includes the
Web Browser control. IE 9 Browser:
Web Browser control
in a WPF form: The IE 9 page displays this HTML correctly – you see the rounded corners and shadow displayed. Obviously the latter rendering using the
Web Browser control
in a WPF application is a bit lacking. Not only are the new CSS features missing but the page also renders
in Internet Explorer’s quirks mode so all the margins, padding etc. behave differently by default, even though there’s a CSS reset applied on this page. If you’re building an application that intends
to use the
Web Browser control for a live preview of some HTML this is clearly undesirable. Feature Delegation via Registry Hacks Fortunately starting with Internet Explore 8 and later there’s a fix for this problem via a registry setting. You can specify a registry key
to specify which rendering mode and version of IE should be used by that application. These are not global mind you – they have
to be enabled for each application individually. There are two different sets of keys for 32 bit and 64 bit applications. 32 bit: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION Value Key: yourapplication.exe 64 bit: HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION Value Key: yourapplication.exe The value
to set this key
to is (taken from MSDN here) as decimal values: 9999 (0x270F) 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. 8888 (0x22B8) 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. 7000 (0x1B58) Webpages containing standards-based !DOCTYPE directives are displayed
in IE7 Standards mode. The added key looks something like this
in the Registry Editor: With this
in place my Html Html Help Builder application which has wwhelp.exe as its main executable now works with HTML 5 and CSS 3 documents
in the same way that Internet Explorer 9 does. Incidentally I accidentally added an ‘empty’ DWORD value of 0
to my EXE name and that worked as well giving me IE 9 rendering. Although not documented I suspect 0 (or an invalid value) will default
to the installed browser. Don’t have a good way
to test this but if somebody could try this with IE 8 installed that would be great: What happens when setting 9000 with IE 8 installed? What happens when setting 0 with IE 8 installed? Don’t forget
to add Keys for Host Environments If you’re developing your application
in Visual Studio and you run the debugger you may find that your application is still not rendering right, but if you run the actual generated EXE from Explorer or the OS command prompt it works. That’s because when you run the debugger
in Visual Studio it wraps your application into a debugging host container. For this reason you might want
to also add another registry key for yourapp.vshost.exe on your development machine. If you’re developing
in Visual FoxPro make sure you add a key for vfp9.exe
to see the rendering adjustments
in the Visual FoxPro development environment. Cleaner HTML - no more HTML mangling! There are a number of additional benefits
to setting up rendering of the
Web Browser control
to the IE 9 engine (or even the IE 8 engine) beyond the obvious rendering functionality. IE 9 actually returns your HTML
in something that resembles the original HTML formatting, as opposed
to the IE 7 default format which mangled the original HTML content. If you do the following
in the WPF application: private void button2_Click(object sender, RoutedEventArgs e)
{
dynamic doc = this.webBrowser.Document;
MessageBox.Show(doc.body.outerHtml);
}
you
get different output depending on the rendering mode active. With the default IE 7 rendering you get:
<BODY><DIV>
<H1>Rounded Corners and Shadows - Creating Dialogs
in CSS</H1>
<DIV class=toolbarcontainer><A class=hoverbutton href="./"><IMG src="../../css/images/home.gif"> Home</A> <A class=hoverbutton href="RoundedCornersAndShadows.htm"><IMG src="../../css/images/refresh.gif"> Refresh</A> </DIV>
<DIV class=containercontent>
<FIELDSET><LEGEND>Plain Box</LEGEND><!-- Simple Box with rounded corners and shadow -->
<DIV style="BORDER-BOTTOM: steelblue 2px solid; BORDER-LEFT: steelblue 2px solid; WIDTH: 550px; BORDER-TOP: steelblue 2px solid; BORDER-RIGHT: steelblue 2px solid" class="roundbox boxshadow">
<DIV style="BACKGROUND: khaki" class="boxcontenttext roundbox">Simple Rounded Corner Box. </DIV></DIV></FIELDSET>
<FIELDSET><LEGEND>Box with Header</LEGEND>
<DIV style="BORDER-BOTTOM: steelblue 2px solid; BORDER-LEFT: steelblue 2px solid; WIDTH: 550px; BORDER-TOP: steelblue 2px solid; BORDER-RIGHT: steelblue 2px solid" class="roundbox boxshadow">
<DIV class="gridheaderleft roundbox-top">Box with a Header</DIV>
<DIV style="BACKGROUND: khaki" class="boxcontenttext roundbox-bottom">Simple Rounded Corner Box. </DIV></DIV></FIELDSET>
<FIELDSET><LEGEND>Dialog Style Window</LEGEND>
<DIV style="POSITION: relative; WIDTH: 450px" id=divDialog class="dialog boxshadow" jQuery16107208195684204002="2">
<DIV style="POSITION: relative" class=dialog-header>
<DIV class=closebox></DIV>User Sign-in
<DIV class=closebox jQuery16107208195684204002="3"></DIV></DIV>
<DIV class=descriptionheader>This dialog is draggable and closable</DIV>
<DIV class=dialog-content><LABEL>Username:</LABEL> <INPUT name=txtUsername value=" "> <LABEL>Password</LABEL> <INPUT name=txtPassword value=" ">
<HR>
<INPUT id=btnLogin value=Login type=button> </DIV>
<DIV class=dialog-statusbar>Ready</DIV></DIV></FIELDSET> </DIV>
<SCRIPT type=text/javascript>
$(document).ready(function () {
$("#divDialog")
.draggable({ handle: ".dialog-header" })
.closable({ handle: ".dialog-header",
closeHandler: function () {
alert("Window about
to be closed.");
return true; // true closes - false leaves open
}
});
});
</SCRIPT>
</DIV></BODY>
Now lest you think I’m out of my mind and create complete whacky HTML rooted
in the last century, here’s the IE 9 rendering mode output which looks a heck of a lot cleaner and a lot closer
to my original HTML of the page I’m accessing:
<body>
<div>
<h1>Rounded Corners and Shadows - Creating Dialogs
in CSS</h1>
<div class="toolbarcontainer">
<a class="hoverbutton" href="./"> <img src="../../css/images/home.gif"> Home</a>
<a class="hoverbutton" href="RoundedCornersAndShadows.htm"> <img src="../../css/images/refresh.gif"> Refresh</a>
</div>
<div class="containercontent">
<fieldset>
<legend>Plain Box</legend> <!-- Simple Box with rounded corners and shadow -->
<div style="border: 2px solid steelblue; width: 550px;" class="roundbox boxshadow"> <div style="background: khaki;" class="boxcontenttext roundbox">
Simple Rounded Corner Box.
</div>
</div>
</fieldset>
<fieldset>
<legend>Box with Header</legend>
<div style="border: 2px solid steelblue; width: 550px;" class="roundbox boxshadow"> <div class="gridheaderleft roundbox-top">Box with a Header</div>
<div style="background: khaki;" class="boxcontenttext roundbox-bottom">
Simple Rounded Corner Box.
</div>
</div>
</fieldset>
<fieldset>
<legend>Dialog Style Window</legend>
<div style="width: 450px; position: relative;" id="divDialog" class="dialog boxshadow">
<div style="position: relative;" class="dialog-header">
<div class="closebox"></div>
User Sign-in
<div class="closebox"></div></div>
<div class="descriptionheader">This dialog is draggable and closable</div> <div class="dialog-content">
<label>Username:</label>
<input name="txtUsername" value=" " type="text">
<label>Password</label>
<input name="txtPassword" value=" " type="text">
<hr/>
<input id="btnLogin" value="Login" type="button"> </div>
<div class="dialog-statusbar">Ready</div>
</div>
</fieldset>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#divDialog")
.draggable({ handle: ".dialog-header" })
.closable({ handle: ".dialog-header",
closeHandler: function () {
alert("Window about
to be closed.");
return true; // true closes - false leaves open
}
});
});
</script>
</div>
</body>
IOW,
in IE9 rendering mode IE9 is much closer (but not identical)
to the original HTML from the page on the
Web that we’re reading from.
As a side note: Unfortunately, the browser feature emulation can't be applied against the Html Help (CHM) Engine
in Windows which uses the
Web Browser control (or COM interfaces anyway)
to render Html Help content. I tried setting up hh.exe which is the help viewer,
to use IE 9 rendering but a help file generated with CSS3 features will simply show
in IE 7 mode. Bummer - this would have been a nice quick fix
to allow help content served from CHM files
to look better.
HTML Editing leaves HTML formatting intact
In the same vane, if you do any inline HTML editing
in the control by setting content
to be editable, IE 9’s control does a much more reasonable job of creating usable and somewhat valid HTML. It also leaves the original content alone other than the text your are editing or adding. No longer is the HTML output stripped of excess spaces and reformatted
in IEs format.
So if I do:
private void button3_Click(object sender, RoutedEventArgs e)
{
dynamic doc = this.webBrowser.Document;
doc.body.contentEditable = true;
}
and then make some changes
to the document by typing into it using IE 9 mode, the document formatting stays intact and only the affected content is modified. The created HTML is reasonably clean (although it does lack proper XHTML formatting for things like <br/> <hr/>). This is very different from IE 7 mode which mangled the HTML as soon as the page was loaded into the control. Any editing you did stripped out all white space and lost all of your existing XHTML formatting.
In IE 9 mode at least *most* of your original formatting stays intact.
This is huge!
In Html Help Builder I have supported HTML editing for a long time but the HTML mangling by the
Web Browser control made it very difficult
to edit the HTML later. Previously IE would mangle the HTML by stripping out spaces, upper casing all tags and converting many XHTML safe tags
to its HTML 3 tags. Now IE leaves most of my document alone while editing, and creates cleaner and more compliant markup (with exception of self-closing elements like BR/HR).
The end result is that I now have HTML editing
in place that's much cleaner and actually capable of being manually edited.
Caveats, Caveats, Caveats
It wouldn't be Internet Explorer if there weren't some major compatibility issues involved
in using this various browser version interaction. The biggest thing I ran into is that there are odd differences
in some of the COM interfaces and what they return.
I specifically ran into a problem with the document.selection.createRange() function which with IE 7 compatibility returns an expected text range object. When running
in IE 8 or IE 9 mode however. I could not retrieve a valid text range with this code where loEdit is the WebBrowser control:
loRange = loEdit.document.selection.CreateRange()
The loRange object returned (here
in FoxPro) had a length property of 0 but none of the other properties of the TextRange or TextRangeCollection objects were available.
I figured this was due
to some changed security settings but even after elevating the Intranet Security Zone and mucking with the other browser feature flags pertaining
to security I had no luck.
In the end I relented and used a JavaScript function
in my editor document that returns a selection range object:
function getselectionrange() {
var range = document.selection.createRange();
return range;
}
and call that JavaScript function from my host applications code:
*** Use a function
in the document
to get around HTML Editing issues
loRange = loEdit.document.parentWindow.getselectionrange(.f.)
and that does work correctly. This wasn't a big deal as I'm already loading a support script file into the editor page so all I had
to do is add the function
to this existing script file. You can find out more
how to call script code
in the
Web Browser control from a host application
in a previous post of mine.
IE 8 and 9 also clamp down the security environment a little more than the default IE 7 control, so there may be other issues you run into. Other than the createRange() problem above I haven't seen anything else that is breaking
in my code so far though and that's encouraging at least since it uses a lot of HTML document manipulation for the custom editor I've created (and would love
to replace - any PROFESSIONAL alternatives anybody?)
Registry Key Installation for your Application
It’s important
to remember that this registry setting is made per application, so most likely this is something you want
to set up with your installer. Also remember that 32 and 64 bit settings require separate settings
in the registry so if you’re creating your installer you most likely will want
to set both keys
in the registry preemptively for your application.
I use Tarma Installer for all of my application installs and
in Tarma I configure registry keys for both and set a flag
to only install the latter key group
in the 64 bit version:
Because this setting is application specific you have
to do this for every application you install unfortunately, but this also means that you can safely configure this setting
in the registry because it is after only applied
to your application.
Another problem with install based installation is version detection. If IE 8 is installed I’d want 8000 for the value, if IE 9 is installed I want 9000. I can do this easily
in code but
in the installer this is much more difficult. I don’t have a good solution for this at the moment, but given that the app works with IE 7 mode now, IE 9 mode is just a bonus for the moment. If IE 9 is not installed and 9000 is used the default rendering will remain
in use.
It sure would be nice if we could specify the IE rendering mode as a property, but I suspect the ActiveX container has
to know before it loads what actual version
to load up and once loaded can only load a single version of IE. This would account for this annoying application level configuration…
Summary
The registry feature emulation has been available for quite some time, but I just found out about it today and started experimenting around with it. I’m stoked
to see that this is available as I’d pretty much given up
in ever seeing any better rendering
in the
Web Browser control. Now at least my apps can take advantage of newer HTML features.
Now if we could only
get better HTML Editing support somehow <snicker>… ah can’t have everything.© Rick Strahl, West Wind Technologies, 2005-2011Posted
in .NET FoxPro Windows
