How can I get the WebBrowser control to show modern contents?

Question

I've created a Winforms app that uses a WebBrowser control; I dynamically assign its Uri. It worked fine for awhile, but now I'm getting this msg:

You seem to be using an unsupported browser. Older browsers can put your security at risk, are slow and don't work with newer Google Maps features. To access Google Maps, you'll need to update to a modern browser.

The last two words are a link, and following that link, I see:

You are currently using... IE 11

So, okay, the WebBrowser component uses IE 11; how can I change that?

My machine is set to use Chrome as its browser; perhaps the control should use whatever your current browser is? I don't know if that's possible/feasible.

UPDATE

Okay, I'm willing to give Reza's suggestion a try. But when I navigate to the specified spot in regedit, and right-click in the right pane to add a New entry, it has three options:

Key, String Value, Binary Value

I reckon the string values are the ".exe" strings, and the Binary values are the "dword" vals, but what should the "Key" values be?

Solution 1

Note: The post is about WebBrowser control, however, for all the new .NET projects the main solution is using WebView2. To learn more, take a look at this post:

• Getting started with WebView2.

WebBrowser Control

The WebBrowser control uses the same Internet Explorer version which is installed on your OS but it doesn't use the latest document mode by default and shows content in compatibility mode.

Symptom - As a symptom, the site works properly in Internet Explorer or other browsers, but WebBrowser control doesn't show the site well and for some sites it shows script errors.

Solution - You can tell the WebBrowser control to use the latest document mode without compatibility mode in WebBrowser control. You can follow instructions here to disable the setting using registry. _{[Reference: Browser Emulation]}

Apply Browser Emulation setting using code

If you want to apply the settings using code, run the following code once:

using (var key = Microsoft.Win32.Registry.CurrentUser.OpenSubKey(
    @"Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION",
    true))
{
    var app = System.IO.Path.GetFileName(Application.ExecutablePath);
    key.SetValue(app, 11001, Microsoft.Win32.RegistryValueKind.DWord);
    key.Close();
}

In above code, I've used 11001 which means IE11 Edge mode.

Internet Explorer 11. Webpages are displayed in IE11 edge mode, regardless of the declared !DOCTYPE directive. Failing to declare a !DOCTYPE directive causes the page to load in Quirks.

Apply the Browser Emulation setting manually

Open Registry editor and browse HKEY_CURRENT_USER, go to the following key:

Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION

Add the following values:

"YourApplicationFileName.exe"=dword:00002af9
"YourApplicationFileName.vshost.exe"=dword:00002af9

(In older versions of Visual Studio you needed to add vshost.exe value as well, when you run your program in Visual Studio.)

To create entries right click on an empty area of the right pane, then in the window which appears after selecting dword value, choose hexadecimal and enter 2af9:

In above steps, I've used 11001 which means IE11 Edge mode.

Use WebViewCompatible Control for Windows Forms

You can also use the new WebViewCompatible control for Windows Forms. You can see simple steps to use here: Replace WebBrowser control by new WebView Compatible control for Windows Forms.

WebViewCompatible uses one of two rendering engines to support a broader set of Windows clients:

• On Windows 10 devices, the newer Microsoft Edge rendering engine is used to embed a view that renders richly formatted HTML content from a remote web server, dynamically generated code, or content files.

• On devices running older versions of Windows, the System.Windows.Controls.WebBrowser is used, which provides Internet Explorer engine-based rendering.

• Note: WebView2 is a replacement for WebVeiw and WebViewCompatible.

Set X-UA-Compatibile meta tag

In case that you have access to the html content of the page and you can change the content (for example it's a local html file, or the site belong to yourself) then you can set X-UA-Compatibile meta tag in the head like: <meta http-equiv="X-UA-Compatible" content="IE=Edge" />.

Use other Browser Controls

You can rely on other browser controls like CefSharp.

Solution 2

In my case for embedded custom protocol on an application, I will allow only to browse pages served by the application, and no content from the outside, so I wanted to skip saving to the Windows Registry. When I tested after following Reza Aghaei answer and found that you can change the compatibility mode from within the content page. This will skip the need to configure a registry key, but you will have to add it to every page.

For changing the compatibility mode of a page, you must add a meta tag for it to be applied by the rendering engine:

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    </head>
    <body>
    ...
    </body>
</html>

Solution 3

The below procedures will add the correct key and remove it again. Call the CreateBrowserKey upon loading the form that your web browser is in. Then when closing the form, call the RemoveBrowserKey

Private Sub CreateBrowserKey(Optional ByVal IgnoreIDocDirective As Boolean = False)
    '      Dim basekey As String = Microsoft.Win32.Registry.CurrentUser.ToString
    Dim value As Int32
    '       Dim thisAppsName As String = My.Application.Info.AssemblyName & ".exe"

    ' Value reference: http://msdn.microsoft.com/en-us/library/ee330730%28v=VS.85%29.aspx
    ' IDOC Reference:  http://msdn.microsoft.com/en-us/library/ms535242%28v=vs.85%29.aspx
    Select Case (New WebBrowser).Version.Major
        Case 8
            If IgnoreIDocDirective Then
                value = 8888
            Else
                value = 8000
            End If
        Case 9
            If IgnoreIDocDirective Then
                value = 9999
            Else
                value = 9000
            End If
        Case 10
            If IgnoreIDocDirective Then
                value = 10001
            Else
                value = 10000
            End If
        Case 11
            If IgnoreIDocDirective Then
                value = 11001
            Else
                value = 11000
            End If

        Case Else
            Exit Sub
    End Select
    Microsoft.Win32.Registry.SetValue(Microsoft.Win32.Registry.CurrentUser.ToString & BrowserKeyPath, _
                                              Process.GetCurrentProcess.ProcessName & ".exe", _
                                              value, _
                                              Microsoft.Win32.RegistryValueKind.DWord)
End Sub

Private Sub RemoveBrowserKey()
    Dim key As Microsoft.Win32.RegistryKey
    key = Microsoft.Win32.Registry.CurrentUser.OpenSubKey(BrowserKeyPath.Substring(1), True)
    key.DeleteValue(Process.GetCurrentProcess.ProcessName & ".exe", False)
End Sub

Solution 4

The C# WebBrowser class is a basically a IE wrapper and because of this it cannot be changed.

See this link:

The WebBrowser control is a managed wrapper around a component installed with Internet Explorer.

For alternatives you can check out

WebKit.NET

GeckoFX

View more solutions

Comments

[Reza Aghaei]

Usually it solves the problem of script and style errors by using edge mode of IE. This way the site will detect your agent as IE 11 edge mode.

[B. Clay Shannon-B. Crow Raven]

Please see my Update.

[Reza Aghaei]

See the image in post.

[B. Clay Shannon-B. Crow Raven]

Works like a charm bracelet.

[Reza Aghaei]

Great! You can apply this solution for cases which the site is OK in IE browser but doesn't show correctly in WebBrowser Control. By the way, if you are distributing the application on client machines, don't forget to perform such task using the installer or using your code.

[Reza Aghaei]

Thanks for the bounty! I like the way that you earn and spend reputation scores!

[Eric]

@RezaAghaei please edit your first code snippet to include a call to Close() and Dispose() methods on the key object (for the Dispose method, preferably with the using() pattern). At the very least, add a note right below the code snippet mentioning that any person copying your snippet should call Close() and Dispose() (for the people just copy&pasting this into Production code)