WPF WebBrowser and JavaScript interaction

time to read 3 min | 420 words

I found myself needing to interact with JavaScript API in a WebBrowser hosted in a WPF application. That turned out to be quite a challenge to figure out, but I prevailed :-)

Given the following XAML:

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
      <WebBrowser x:Name="Browser" />
    </Grid>
</Window>

You can interact with the JavaScript API using this code:

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
        Browser.LoadCompleted += BrowserOnLoadCompleted;
        Browser.Navigate(new Uri("http://example.com"));
    }

    private void BrowserOnLoadCompleted(object sender, NavigationEventArgs navigationEventArgs)
    {
        var doc = (HTMLDocument)Browser.Document;
        var head = doc.getElementsByTagName("head").Cast<HTMLHeadElement>().First();
        var script = (IHTMLScriptElement)doc.createElement("script");
        script.text = "alert('hi');";
        head.appendChild((IHTMLDOMNode)script);
        script.text = "alert('bye');";
    }
}

This allow you to inject JavaScript commands to the browser by manipulation the script.text property. It isn’t generally useful, I’ll admit, but for my scenario, it seems to be doing the job.