Winforms with a WebBrowserControl, Fun with ObjectForScripting

Recently I had to put a map control (like Google Maps) in a Winforms application and I had to make the map control react on actions performed on the Winform. I discovered that this was very easy and fun to do with the ObjectForScripting.

In this post I will explain the basics of how to work and communicate with a WebBrowserControl in a Winforms application. I have made a test project which you can download so you can see the magic in action. Because I want to show you the basics of the ObjectForScripting I kept the project as simple as possible. No fancy code-patterns… just straightforward coding.

The idea of the project is:

  • The Winform has several input fields for personal information which are all disabled
  • A button on a webpage in the WebBrowserControl activates the input fields of the Winform
  • The Winform contains a button which transfers the values of the input fields on the Winform to the input fields of a webpage

By implementing this in my project I can demonstrate the communication from Webpage to Winform (activating the controls on the Winform) as well as the communication from Winform to the Webpage (filling the input fields). Download the project and examine it carefully.

So now look at the code
The communication between the WebBrowser and the Winform works through JavaScript. You can call methods of the JavaScript in your C# code like this:

  this.webBrowser.Document.InvokeScript("alert", new object[] { "Hello World" });

and you can call your C# methods in your JavaScript like this:

  window.external.ActivateControls();

But before you can do so you must enable the communication by setting the ObjectForScripting on the WebBrowserControl.

  this.webBrowser.ObjectForScripting = this;

The above line of code sets the object for scripting. In this case it is set to ‘this’ which is the Winform in this project. The object set here is available in the JavaScript through window.external. So the methods of that object are available in the JavaScript.
If you set this line of code and compile the project you will get an Error. This is because the JavaScript has got to have access to the C# code and so we must mark the C# code visible for COM. We do this by setting the ComVisibleAttribute on the object we passed as the ObjectForScripting.

  [ComVisible(true)]
  public partial class GeekBrowser : Form

There is one small difference in calling the C# code from JavaScript and vice versa. When you call C# code from JavaScript you can send in the parameters directly. When you want to send parameters from C# to JavaScript methods you must send it as an Array of Objects. In our test project the JavaScript method takes 5 parameters and therefore I have to create an Array of Objects and give it the 5 parameters and send that array to the method:

  [ComVisible(true)]
  object[] args = new object[5];
  args[0] = this.firstNameTextBox.Text;
  args[1] = this.lastNameTextBox.Text;
  args[2] = this.addressTextBox.Text;
  args[3] = this.phoneTextBox.Text;
  args[4] = this.emailTextBox.Text;

  this.webBrowser.Document.InvokeScript("fillFields", args);

And that is, in a nutshell, how you can make the Winform communicate with the contents of the WebBrowser.

Read more about the test project on page 2.

    • vifo
    • August 8th, 2010

    Hi

    Is possible to take any value from webBrowser document to winForm??

    • Hi vifo,

      I don’t know exactly what you are talking about. What kind of values do you want from the webbrowsercontrol? You can get almost any value from it, the only thing is that it must be a simple type. A string or integer e.g.

      If you want such a value write a method in Javascript which gets the value and returns it. Than call that method in C# like I described in my post.

      Hope this answers your question, if not please reply.

      Greetz Michel van der Weide

    • lethak
    • December 9th, 2010

    Brillant, exactly what I need.
    Thx

    • Mark
    • September 26th, 2013

    Very clear and easy to understand instructions.
    Thanks for sharing.

  1. March 4th, 2010