LINQPad secret - WebView2 and adding HTML items later

Automan72 · January 30

I did an example in Windows Forms with the WebView2 control.
I can load HTML text into the WebView2 using a string.

using Microsoft.Web.WebView2.WinForms;

namespace WebView2WinForms;

public partial class Form1 : Form
{
private WebView2? _browser;

public Form1()
{
    InitializeComponent();
    InitializeWebView();
}

private async void InitializeWebView()
{
    _browser = new WebView2 { Dock = DockStyle.Fill };
    Controls.Add(_browser);

    await _browser.EnsureCoreWebView2Async();

    //_browser.Source = new Uri("https://www.google.com");

    var html = @"<html>
                <head>
                    <title>Basic Web Page</title>
                </head>
                <body>
                    Hello World!
                </body>
            </html>";

    _browser.NavigateToString(html);
}

}

I'm wondering how LINQPad can add more HTML items - after displaying the first one - without reload/set the whole page.
This is very interesting to know, if it is not a super secret ;-)

async Task Main()
{
TimeZoneInfo.Local.Dump();
await Task.Delay(2000);
TimeZoneInfo.Local.Dump();
await Task.Delay(2000);
TimeZoneInfo.Local.Dump();
}

i2van · January 30

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content.

Automan72 · January 31

Ok, thank you, now I understand. I leave the above modified example for reference:

using Microsoft.Web.WebView2.WinForms;

namespace WebView2WinForms;

public partial class Form1 : Form
{
private WebView2? _browser;

public Form1()
{
    InitializeComponent();
    InitializeWebView();
}

private async void InitializeWebView()
{
    _browser = new WebView2 { Dock = DockStyle.Fill };
    await _browser.EnsureCoreWebView2Async(null);
    Controls.Add(_browser);

    //_browser.Source = new Uri("https://www.google.com");

    var html = @"<html>
                <head>
                    <title>Basic Web Page</title>
                </head>
                <body>
                    Hello World!
                </body>
            </html>";

    _browser.CoreWebView2.NavigateToString(html);

    _browser.CoreWebView2.NavigationCompleted += async (sender, args) =>
    {
        if (args.IsSuccess) { await AddElementToDOM(); }
    };
}

private async Task AddElementToDOM()
{
    string script = @"
    var newElement = document.createElement('div');
    newElement.innerHTML = '<p>This is a new paragraph added dynamically.</p>';
    document.body.appendChild(newElement);
    ";

    if (_browser is not null)
    {
        // Esegui lo script JavaScript nel contesto della pagina caricata
        await _browser.CoreWebView2.ExecuteScriptAsync(script);
    }
}

}

i2van · January 31

innerHTML is considered obsolete, there are other ways to do it.

LINQPad secret - WebView2 and adding HTML items later

Comments

Categories