Windows Store Apps: Invoke ScriptNotify Event When we Click a Button Inside a WebView

Introduction

In Windows Store apps it is possible to use a WebView control to show web pages and sometimes we may need to intercept the action between the web page and the code behind of the XAML page, to do other tasks based on the action.

There are some changes from Windows 8.0 to Windows 8.1 related to the WebView control. These differences can be found here What's new in WebView in Windows 8.1 and there is an interesting sample: How to intercept JavaScript alert in WebView in universal Windows apps from OneCode Team. In this sample, we will see a solution for when we click a button from a web page hosted in a WebView.

Description

To start, we need to create a Windows Store App. We can select the Blank Template and then we need to create a basic HTML page with a button as in the following:

<!--<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->DOCTYPE html>
<button id="MyButton" type="button">Click here...</button>

We then need to define a WebView in the MainPage.xaml, as in the following:

<WebView Name="WebView"
   Margin="100"
   NavigationCompleted="WebView_OnNavigationCompleted"
   ScriptNotify="WebView_OnScriptNotify"
   Source="ms-appx-web:///HtmlPage.html" />

And in the code behind, we need to define the NavigationCompleted event handler as in the following:

private async void WebView_OnNavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
   await WebView.InvokeScriptAsync("eval", new[]
   {
      "var signButton=document.getElementById(\"MyButton\");" +
      "if (signButton.addEventListener) {" +
      "signButton.addEventListener(\"click\", MyButtonClicked, false);" +
      "} else {" +
         "signButton.attachEvent('onclick', MyButtonClicked);" +
         "} " +
         "function MyButtonClicked(){" +
         " window.external.notify('%%' + location.href);"+
      "}"
   });
}

Here we are injecting JavaScript code into the web page that will add the event click to the "MyButton" button defined in the HTML page. Each time the click event is fired the function "MyButtonClicked" will be called and it will fire the ScriptNotify event providing the URL.

Now we need to define the ScriptNotify event handler, as in the following:

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

When this event occurs we will get the value returned by the web page.

Running the Application



And by clicking the button we will get the URL value, as we can see in the following image.