Interaction between WebBrowser Control and Windows Forms

You can manipulate the Form and Controls or call C# methods from WebBrowser using JavaScript and also you can manipulate content of WebBrowser control or call JavaScript methods from C#.

Manipulate WinForms from Html

To manipulate your Form from WebBrowser control and call C# methods and access your form properties you should decorate your form with [ComVisibleAttribute(true)] then you can set the form as ObjectForScripting property of WebBrowser control.

[ComVisibleAttribute(true)]
public partial class Form1 : Form
{
    private void Form1_Load(object sender, EventArgs e)
    {
        this.webBrowser1.ObjectForScripting = this;
    }
}

Then you can simply call methods and access to elements of your windows form this way:

Call C# method from JavaScript:

window.external.SomeCSMethod('Method called from JavaScript');

Set value of a WinForms Control from JavaScript:

Make the textBox1 control on your Form to be public by setting the value of Modifier property to public using desginer. Then it can be accessible from JavaScript:

window.external.textBox1.Text="Value set from JavaScript";

Manipulate Html from WinForms

You can manipulate html content of web browser control from C# code and call JavaScript methods or set value of html elements using methods of Document property of WebBrowser control:

Call JavaScript method from C#:

this.webBrowser1.Document.InvokeScript("someJSMethod", new []{"Method called from C#"});

Set value of a Html Control from C#:

this.webBrowser1.Document.GetElementById("text1")
                         .SetAttribute("Value set from C#", "Value From C#");

Sample Code:

You can create a Form1 class and put button1 and button2 and textBox1 and webBrowser1 on your Form set the Modifer of textBox1 to public:

[ComVisibleAttribute(true)]
public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        this.Load += Form1_Load;
        button1.Click += button1_Click;
        button2.Click += button2_Click;
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        this.webBrowser1.DocumentText =
        @"<html>
        <head>
        <title>Test</title>
        <script>
            function someJSMethod(value){alert(value);}
        </script>
        </head>
        <body>
            <input type=""text"" id=""text1""/>
            <br/>
            <input type=""button"" value=""Call C# Method"" id=""button1""
            onclick=""window.external.SomeCSMethod('Method called from JavaScript');""/>
            <br/>
            <input type=""button"" value=""Set WinForms Control Value"" id=""button2""
            onclick=""window.external.textBox1.Text="Value set from JavaScript";""/>
        </body>
        </html>";
        this.webBrowser1.ObjectForScripting = this;
    }

    public void SomeCSMethod(string value)
    {
        MessageBox.Show(value);
    }

    private void button1_Click(object sender, EventArgs e)
    {
        this.webBrowser1.Document
                        .InvokeScript("someJSMethod", new[]{ "Method called from C#" });
    }

    private void button2_Click(object sender, EventArgs e)
    {
        this.webBrowser1.Document.GetElementById("text1")
                                 .SetAttribute("value", "Value set from C#");
    }
}

Leave a Comment