Windows Phone WebBrowser control: Manipulating Page DOM

Introduction

If you've programmed for Desktop (Windows Forms), you should know that WebBrowser control has a property called Document (of type HtmlDocument). This property allows us to manipulate the DOM of the page.

However, that property does not exist in the Windows Phone WebBrowser control. But there is still a way to manipulate the DOM of the page, which is using JavaScript.

Background

Basically, my code uses the WebBrowser InvokeScript function to manipulate the DOM of the page with the help of JavaScript.

The code is based on the concept described in another of my articles:

• Inject scripts into a page in WebBrowser control - CodeProject

An Important Thing

Before you start invoking scripts, first set the IsScriptEnabled property to True, otherwise it will not work.

Using the Code

Below is an example of DOM manipulation through JavaScript:

string script = "function() { return document.getElementById('ElementID').innerText; }";
string elementInnerText = (string)WebBrowser1.InvokeScript("eval", script);

In the above example, I use a small script to get the InnerText property of an element in the web page.

Remarks

Unfortunately, I do not have the Windows Phone SDK installed. So I was unable to test the above code.

However, according to the theory and documentation, this is the right way.

If you get any exceptions when calling the method InvokeScript, try modifying your script. Remember that the same thing can be done in many ways.

I should point out that the same script may not work on all versions of Windows Phone, so you should test!

Original Source

This was originally posted on my personal blog (Brazilian Portuguese).
If you speak Portuguese, feel the urge to visit the original post:

• Windows Phone e o WebBrowser: Manipulando o DOM da página | Herbert.Lausmann