CODEWITHSUNDEEP
c#html.netwinformswebbrowser-control
Michael Haddad
Michael Haddad

Reputation: 4435

InnerHtml of Template tag returnes null in WebBrowser control

I have a WebBrowser control on a WinForm form, which should show a specific HTML page. Within the HTML page, I have some <template>s that should be used to populate the page. When I use the following code:

string template = webBrowser.Document.GetElementById("template-id").InnerHtml

I get null, instead of the actual inner HTML.

I guess it has to do with the fact that the template tag is not supported in old IE versions, hence in the WebBrowser control. How can I fix it? Is it even possible?

Of course, I could put my template into a string and be done with it, but this seems very hacky.

Thanks!

Upvotes: 0

Views: 261

Answers (1)

Reza Aghaei
Reza Aghaei

Reputation: 125197

WebBrowser control uses Internet Explorer and Internet Explorer doesn't support <template> tag. (See Browser compatibility) section.

If you can modify content of pages

If you can modify content of pages, there are some workaround for you to be able to use <template> tag. You can use either of the following options:

  1. Option 1 - Make the tag hidden and load IE in edge mode

    webBrowser1.DocumentText = @"
<html>
<head>
    <title>Test</title>
    <meta http-equiv=""X-UA-Compatible"" content=""IE=Edge"" />
</head>
<body>
    <h1>Test</h1>
    <div>This is a test page.</div>
    <template id=""template1"" style=""display:none;"">
        <h2>Flower</h2>
        <img src=""img_white_flower.jpg"" />
    </template>
</body>
</html>";
webBrowser1.DocumentCompleted += (obj, args) =>
{
    var element = webBrowser1.Document.GetElementById("template1");
    MessageBox.Show(element?.InnerHtml);
};

  2. Option 2 - Include The HTML5 Shiv in the page

    webBrowser1.DocumentText = @"
<html>
<head>
    <title>Test</title>
    <!--[if lt IE 9]>
    <script src=""https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"">
    </script>
    <![endif]-->
</head>
<body>
    <h1>Test</h1>
    <div>This is a test page.</div>
    <template id=""template1"">
        <h2>Flower</h2>
        <img src=""img_white_flower.jpg"" />
    </template>
</body>
</html>";
webBrowser1.DocumentCompleted += (obj, args) =>
{
    var element = webBrowser1.Document.GetElementById("template1");
    MessageBox.Show(element?.InnerHtml);
};

If you cannot modify content of pages

If you cannot modify content of the page, you need to use a different browser control, for example:

  1. You can 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. It will use Edge rendering engine on Windows 10, but for other windows versions, it uses IE again.
  2. You can rely on other You can rely on other browser controls like CefSharp.

Upvotes: 1

Related Questions