WPF WebBrowser control – part 2

Registering .NET handlers to DOM elements’ events

With an approach similar to the previous one (see part 1), we can register callbacks that get executed when a DOM event is triggered. Simply put: we can execute .NET code in response, for example, to a click on a HTML input text element. To do this you need to add the MSHTML library to the project references, like I showed in part 1.

As before, let’s assume that we have a simple UserControl that uses a WebBrowser:


<UserControl x:Class="WebBrowserExample.WebBrowserAdapter"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <WebBrowser x:Name="WebBrowserControl"></WebBrowser>
    </Grid>
</UserControl>

and we add our UserControl to the main window, just like this:


<Window x:Class="WebBrowserExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"
xmlns:cont="clr-namespace:WebBrowserExample">
    <Grid>
        <cont:WebBrowserAdapter></cont:WebBrowserAdapter>
    </Grid>
</Window>

We can now use types and classes from mshtlm to directly access the DOM of a HTML page. The following snippet reports the complete code of the WebBrowserAdapter class:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using mshtml;

namespace WebBrowserExample
{
    /// <summary>
    /// Interaction logic for WebBrowserAdapter.xaml
    /// </summary>
    public partial class WebBrowserAdapter : UserControl
    {
        public WebBrowserAdapter()
        {
            InitializeComponent();
            this.Loaded += WebBrowserAdapter_Loaded;
        }

        void WebBrowserAdapter_Loaded(object sender, RoutedEventArgs e)
        {
            WebBrowserControl.LoadCompleted += WebBrowserControl_LoadCompleted;
            WebBrowserControl.Navigate("http://www.google.com");
        }

        void WebBrowserControl_LoadCompleted(object sender, NavigationEventArgs e)
        {
            HookHTMLElements();
        }

        private void HookHTMLElements()
        {
            var document = WebBrowserControl.Document as HTMLDocument;
            var inputElements = document.getElementsByTagName("input");
            foreach (var item in inputElements)
            {
                DispHTMLInputElement inputElement = item as DispHTMLInputElement;
                if (inputElement.type == "text" 
                    || inputElement.type == "password" 
                    || inputElement.type == "search")
                {
                    HTMLButtonElementEvents_Event htmlButtonEvent = inputElement as HTMLButtonElementEvents_Event;
                    htmlButtonEvent.onclick += FocusCallback;
                }
            }
        }

        public bool FocusCallback()
        {
            Console.WriteLine("Callback method executed!");
            return true;
        }
    }
}


In the constructor, WebBrowserAdapter registers itself as a listener to its Loaded event. This event is fired when the user control is rendered and ready for interaction. In the WebBrowserAdapter_Loaded it begins to prepare the WebBrowser control: first, it subscribes to the LoadCompleted event of the WebBrowser: the WebBrowser fires this event whenever a navigation successfully ends. Then it makes the WebBrowser navigate to the Google home page, calling the Navigate method.

When the WebBrowserControl_LoadCompleted method gets executed, we can be sure that the WebBrowser holds a valid HTML document and we can safely call its Document property and manipulate the object return. This is what we do in the HookHTMLElements method: here we go retrieve all the elements that have tag name equal to “input”, much like we would do in a Javascript function (in fact, if you take a look at the methods the intellisense proposes you, you will see that they match the Javascript APIs), and we attach .NET callbacks to the DOM events. Now, if you click on the input text box of the Google home page, the FocusCallback method is called and a line is written on the standard output (see pictures below).

callback02

 

 

Advertisements

2 thoughts on “WPF WebBrowser control – part 2

  1. Hi:

    I have one question. if i use button.onclick how do i attach a callback function?

    var input1 = document.getElementById(“USERID”);
    var input2 = document.getElementById(“LOGPASS”);
    var button = document.getElementById(“loginButton”);

    I have found three htmlelement and when button.onclick i want to have a callback function to store the userid and logpass value

    cheers

  2. Have you tried anything?
    I guess you can do the exact same thing I have done in the example. Am I missing something?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s