如何：在 DHTML 代码和客户端应用程序代码之间实现双向通信

项目
05/04/2023

可使用 WebBrowser 控件将现有的动态 HTML (DHTML) Web 应用程序代码添加到 Windows 窗体客户端应用程序。如果已投入大量的开发时间用于创建基于 DHTML 的控件，并且想要利用 Windows 窗体丰富的用户界面功能，而无需重写现有代码，这将非常有用。

WebBrowser 控件使你通过 ObjectForScripting 和 Document 属性可以实现客户端应用程序代码和 Web 页的脚本代码间的双向通信。此外，还可以配置 WebBrowser 控件，以便 Web 控件与应用程序窗体上的其他控件的无缝混合，从而隐藏其 DHTML 实现。若要无缝地混合控件，需格式化显示的页面，使其背景色和视觉样式可匹配窗体中的其余部分，并使用 AllowWebBrowserDrop、IsWebBrowserContextMenuEnabled和 WebBrowserShortcutsEnabled 属性禁用标准的浏览器功能。

若要在 Windows 窗体应用程序中嵌入 DHTML

需将 WebBrowser 控件的 AllowWebBrowserDrop 属性设置为 false，以防止 WebBrowser 控件打开放到其上的文件。
```
webBrowser1.AllowWebBrowserDrop = false;
```
```
webBrowser1.AllowWebBrowserDrop = False
```
将控件的 IsWebBrowserContextMenuEnabled 属性设置为 false，以防止 WebBrowser 控件在用户进行右键单击时，显示其快捷方式菜单。
```
webBrowser1.IsWebBrowserContextMenuEnabled = false;
```
```
webBrowser1.IsWebBrowserContextMenuEnabled = False
```
将控件的 WebBrowserShortcutsEnabled 属性设置为 false，以防止 WebBrowser 控件响应快捷键。
```
webBrowser1.WebBrowserShortcutsEnabled = false;
```
```
webBrowser1.WebBrowserShortcutsEnabled = False
```
在窗体的构造函数中设置 ObjectForScripting 属性或替代 OnLoad 方法。

以下代码将窗体类自身用于脚本对象。
```
webBrowser1.ObjectForScripting = new MyScriptObject(this);
```
```
webBrowser1.ObjectForScripting = New MyScriptObject(Me)
```

实现脚本对象。

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

在脚本代码中使用 window.external 对象来访问指定对象的公共属性和方法。

以下 HTML 代码演示如何通过单击按钮对脚本对象调用方法。将此代码复制到 HTML 文档的 BODY 元素中，该文档为使用控件的 Navigate 方法所加载的文档，或将其分配到控件的 DocumentText 属性的文档。
```
<button onclick="window.external.Test('called from script code')">
    call client code from script code
</button>
```
实现应用程序代码将使用的脚本代码中的函数。

以下 HTML SCRIPT 元素提供了示例函数。将此代码复制到 HTML 文档的 HEAD 元素中，该文档为使用控件的 Navigate 方法所加载的文档，或将其分配到控件的 DocumentText 属性的文档。
```
<script>
function test(message) {
    alert(message);
}
</script>
```

使用 Document 属性访问客户端应用程序代码中的脚本代码。

例如，将以下代码添加到按钮 Click 事件处理程序中。

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

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

完成 DHTML 调试后，将控件的 ScriptErrorsSuppressed 属性设置为 true，以防止 WebBrowser 控件显示脚本代码问题的错误消息。

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

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

示例

以下完整的代码示例将提供演示应用程序，以方便用于理解此功能。 HTML 代码将通过 DocumentText 属性加载到 WebBrowser 控件中，而不是从单独的 HTML 文件进行加载。

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

编译代码

此代码需要：

对 System 和 System.Windows.Forms 程序集的引用。

通过

如何：在 DHTML 代码和客户端应用程序代码之间实现双向通信

若要在 Windows 窗体应用程序中嵌入 DHTML

示例

编译代码

另请参阅

其他资源