How to: Implement Two-Way Communication Between DHTML Code and Client Application Code

Article
08/18/2022

You can use the WebBrowser control to add existing dynamic HTML (DHTML) Web application code to your Windows Forms client applications. This is useful when you have invested significant development time in creating DHTML-based controls and you want to take advantage of the rich user interface capabilities of Windows Forms without having to rewrite existing code.

The WebBrowser control lets you implement two-way communication between your client application code and your Web page scripting code through the ObjectForScripting and Document properties. Additionally, you can configure the WebBrowser control so that your Web controls blend seamlessly with other controls on your application form, hiding their DHTML implementation. To seamlessly blend the controls, format the page displayed so that its background color and visual style match the rest of the form, and use the AllowWebBrowserDrop, IsWebBrowserContextMenuEnabled, and WebBrowserShortcutsEnabled properties to disable standard browser features.

To embed DHTML in your Windows Forms application

Set the WebBrowser control's AllowWebBrowserDrop property to false to prevent the WebBrowser control from opening files dropped onto it.
```
webBrowser1.AllowWebBrowserDrop = false;
```
```
webBrowser1.AllowWebBrowserDrop = False
```
Set the control's IsWebBrowserContextMenuEnabled property to false to prevent the WebBrowser control from displaying its shortcut menu when the user right-clicks it.
```
webBrowser1.IsWebBrowserContextMenuEnabled = false;
```
```
webBrowser1.IsWebBrowserContextMenuEnabled = False
```
Set the control's WebBrowserShortcutsEnabled property to false to prevent the WebBrowser control from responding to shortcut keys.
```
webBrowser1.WebBrowserShortcutsEnabled = false;
```
```
webBrowser1.WebBrowserShortcutsEnabled = False
```
Set the ObjectForScripting property in the form's constructor or override the OnLoad method.

The following code uses the form class itself for the scripting object.
```
webBrowser1.ObjectForScripting = new MyScriptObject(this);
```
```
webBrowser1.ObjectForScripting = New MyScriptObject(Me)
```

Implement your scripting object.

public class MyScriptObject
{
    private Form1 _form;

    public MyScriptObject(Form1 form)
    {
        _form = form;
    }

    public void Test(string message)
    {
        MessageBox.Show(message, "client code");
    }
}

Public Class MyScriptObject
    Private _form As Form1

    Public Sub New(ByVal form As Form1)
        _form = form
    End Sub

    Public Sub Test(ByVal message As String)
        MessageBox.Show(message, "client code")
    End Sub

End Class

Use the window.external object in your scripting code to access public properties and methods of the specified object.

The following HTML code demonstrates how to call a method on the scripting object from a button click. Copy this code into the BODY element of an HTML document that you load using the control's Navigate method or that you assign to the control's DocumentText property.
```
<button onclick="window.external.Test('called from script code')">
    call client code from script code
</button>
```
Implement functions in your script code that your application code will use.

The following HTML SCRIPT element provides an example function. Copy this code into the HEAD element of an HTML document that you load using the control's Navigate method or that you assign to the control's DocumentText property.
```
<script>
function test(message) {
    alert(message);
}
</script>
```

Use the Document property to access the script code from your client application code.

For example, add the following code to a button Click event handler.

webBrowser1.Document.InvokeScript("test",
    new String[] { "called from client code" });

webBrowser1.Document.InvokeScript("test", _
    New String() {"called from client code"})

When you are finished debugging your DHTML, set the control's ScriptErrorsSuppressed property to true to prevent the WebBrowser control from displaying error messages for script code problems.

// Uncomment the following line when you are finished debugging.
//webBrowser1.ScriptErrorsSuppressed = true;

' Uncomment the following line when you are finished debugging.
'webBrowser1.ScriptErrorsSuppressed = True

Example

The following complete code example provides a demonstration application that you can use to understand this feature. The HTML code is loaded into the WebBrowser control through the DocumentText property instead of being loaded from a separate HTML file.

using System;
using System.Windows.Forms;

public class Form1 : Form
{
    private WebBrowser webBrowser1 = new WebBrowser();
    private Button button1 = new Button();

    [STAThread]
    public static void Main()
    {
        Application.EnableVisualStyles();
        Application.Run(new Form1());
    }

    public Form1()
    {
        button1.Text = "call script code from client code";
        button1.Dock = DockStyle.Top;
        button1.Click += new EventHandler(button1_Click);
        webBrowser1.Dock = DockStyle.Fill;
        Controls.Add(webBrowser1);
        Controls.Add(button1);
    }

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);

        webBrowser1.AllowWebBrowserDrop = false;
        webBrowser1.IsWebBrowserContextMenuEnabled = false;
        webBrowser1.WebBrowserShortcutsEnabled = false;
        webBrowser1.ObjectForScripting = new MyScriptObject(this);
        // Uncomment the following line when you are finished debugging.
        //webBrowser1.ScriptErrorsSuppressed = true;

        webBrowser1.DocumentText =
            "<html><head><script>" +
            "function test(message) { alert(message); }" +
            "</script></head><body><button " +
            "onclick=\"window.external.Test('called from script code')\">" +
            "call client code from script code</button>" +
            "</body></html>";
    }

    private void button1_Click(object sender, EventArgs e)
    {
        webBrowser1.Document.InvokeScript("test",
            new String[] { "called from client code" });
    }
}

public class MyScriptObject
{
    private Form1 _form;

    public MyScriptObject(Form1 form)
    {
        _form = form;
    }

    public void Test(string message)
    {
        MessageBox.Show(message, "client code");
    }
}

Imports System.Windows.Forms

Public Class Form1
    Inherits Form

    Private webBrowser1 As New WebBrowser()
    Private WithEvents button1 As New Button()

    <STAThread()> _
    Public Shared Sub Main()
        Application.EnableVisualStyles()
        Application.Run(New Form1())
    End Sub

    Public Sub New()
        button1.Text = "call script code from client code"
        button1.Dock = DockStyle.Top
        webBrowser1.Dock = DockStyle.Fill
        Controls.Add(webBrowser1)
        Controls.Add(button1)
    End Sub

    Protected Overrides Sub OnLoad(e As EventArgs)
        MyBase.OnLoad(e)

        webBrowser1.AllowWebBrowserDrop = False
        webBrowser1.IsWebBrowserContextMenuEnabled = False
        webBrowser1.WebBrowserShortcutsEnabled = False
        webBrowser1.ObjectForScripting = New MyScriptObject(Me)
        ' Uncomment the following line when you are finished debugging.
        'webBrowser1.ScriptErrorsSuppressed = True

        webBrowser1.DocumentText = _
            "<html><head><script>" & _
            "function test(message) { alert(message); }" & _
            "</script></head><body><button " & _
            "onclick=""window.external.Test('called from script code')"" > " & _
            "call client code from script code</button>" & _
            "</body></html>"
    End Sub

    Private Sub button1_Click(ByVal sender As Object, ByVal e As EventArgs) _
        Handles button1.Click

        webBrowser1.Document.InvokeScript("test", _
            New String() {"called from client code"})

    End Sub

End Class

Public Class MyScriptObject
    Private _form As Form1

    Public Sub New(ByVal form As Form1)
        _form = form
    End Sub

    Public Sub Test(ByVal message As String)
        MessageBox.Show(message, "client code")
    End Sub

End Class

Compiling the Code

This code requires:

References to the System and System.Windows.Forms assemblies.

Share via

How to: Implement Two-Way Communication Between DHTML Code and Client Application Code

To embed DHTML in your Windows Forms application

Example

Compiling the Code

See also

Additional resources