UWP Webview - Trigger event when Tab Title changes (DocumentTitle)

2
votes

I have switched to using UWP (Windows.UI.Xaml.Controls) but now have lost the ability to detect when the webview tab text changes.

Example of text

I previously used an OnTitleChanged event but I cannot find an alternative for this in UWP.

I can see the 'DocumentTitle' in the webView, and it is always updating when necessary.

WebView wv_Browser = new WebView();
string Example = wv_Browser.DocumentTitle;

I have tried every built in event in the WebView but not one of them seem to fire when this updates.

Can anyone suggest and alternative way to trigger an event or monitor this value?

2
c#xamlwebviewuwp
You should use InvokeScriptAsync to run a JavaScript code on the document and received title changed events, then send the event back to your app by injecting an object to the JavaScript code. - Mehrzad Chehraz
Thanks that really helped. I ended up needed to also create the event and injecting it but got it working after looking into what you said. - Richard Burke

2 Answers

3
votes

Unfortunately, there is no OnTitleChanged event in UWP WebView, but you could inject eval function into html page as Mehrzad Chehraz said. Please refer the following detail code.

Make eval function for detecting title changed.

string functionString = " new MutationObserver(function () { window.external.notify(document.title); }).observe(document.querySelector('title'), { childList: true })";

Call InvokeScriptAsync method to inject eval. (call below when webview navigation completed)

await MyWebView.InvokeScriptAsync("eval", new string[] { functionString });

listen value changed in ScriptNotify event handler

private void MyWebView_ScriptNotify(object sender, NotifyEventArgs e)
{
    var title = e.Value;
}

For more info please check UWP WebView tutorial.

2
votes

What I ended up using

    private void CreateWebView()
    {
        WebView webview = new WebView();
        webview .DOMContentLoaded += async (s, e) =>
        {
            WebView_DOMContentLoaded(webview);
        };
        webview .ScriptNotify += (s, e) => {
             . . . Do whatever
        };
    }

   private async void WebView_DOMContentLoaded(WebView sender)
    {
        string function = @"new MutationObserver(function(mutations){window.external.notify(document.getElementById('pageTitle').innerHTML)}).observe(document.getElementById('pageTitle'),{attributes:true,childList:true,subtree:true});";
        await sender.InvokeScriptAsync("eval", new string[] { function });
    }