如何：實作 DHTML 程式碼和用戶端應用程式程式碼之間的雙向通訊

發行項
06/02/2023

您可以使用 WebBrowser 控制項，將現有的動態 HTML (DHTML) Web 應用程式程式碼加入至 Windows Form 用戶端應用程式。這適用於投資了大量的開發時間在建立 DHTML 控制項，而且您想要利用 Windows Form 的豐富使用者介面功能而又不需要重新撰寫現有程式碼的情況。

WebBrowser 控制項可讓您實作用戶端應用程式程式碼與網頁指令碼程式碼之間的雙向通訊，這是透過 ObjectForScripting 和 Document 屬性。此外，您可以設定 WebBrowser 控制，好讓您的 Web 控制項與應用程式表單上其他控制項順暢地混合，隱藏其 DHTML 實作。若要順暢地混合控制項，請格式化所顯示的頁面，以便其背景色彩和視覺化樣式符合表單的其餘部分，並使用 AllowWebBrowserDrop IsWebBrowserContextMenuEnabled 和 WebBrowserShortcutsEnabled 屬性停用標準瀏覽器功能。

在 Windows Form 應用程式中內嵌 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 程式碼示範如何按一下按鈕以在指令碼物件上呼叫方法。將此程式碼複製到您使用控制項 Navigate 方法載入的 HTML 文件的 BODY 項目，或是您指派給控制項 DocumentText 屬性的 HTML 文件的 BODY 項目。
```
<button onclick="window.external.Test('called from script code')">
    call client code from script code
</button>
```
實作您應用程式程式碼將使用之指令碼中的函式。

下列 HTML SCRIPT 項目提供範例函式。將此程式碼複製到您使用控制項 Navigate 方法載入的 HTML 文件的 HEAD 項目，或是您指派給控制項 DocumentText 屬性的 HTML 文件的 HEAD 項目。
```
<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.Windows.Forms 組件的參考。

如何：實作 DHTML 程式碼和用戶端應用程式程式碼之間的雙向通訊

在 Windows Form 應用程式中內嵌 DHTML

範例

編譯程式碼

另請參閱

意見反應

其他資源