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

發行項
08/12/2011

您可以使用 WebBrowser 控制項，將現有的動態超文字標記語言 (DHTML) Web 應用程式程式碼加入至 Windows Form 用戶端應用程式。當您已經投入了大量的開發時間建立 DHTML 控制項，而且您想要不重寫現有程式碼就能享受到 Windows Form 豐富的使用者介面能力時，這項功能就非常有用。

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

若要將 DHTML 內嵌至 Windows Form 應用程式

將 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;
```

在表單的建構函式或 Load 事件處理常式中，設定 ObjectForScripting 屬性。

下列程式碼使用表單類別本身做為指令碼物件。

注意事項
元件物件模型 (Component Object Model，COM) 必須要能夠存取指令碼物件。若要讓 COM 看見您的表單，請將 ComVisibleAttribute 屬性 (Attribute) 加入至表單類別。

webBrowser1.ObjectForScripting = Me

webBrowser1.ObjectForScripting = this;

在應用程式程式碼中，實作指令碼會使用的公用屬性或方法。

例如，如果您使用表單類別做為指令碼物件，請將下列程式碼加入至表單類別。
```
Public Sub Test(ByVal message As String)
    MessageBox.Show(message, "client code")
End Sub
```
```
public void Test(String message)
{
    MessageBox.Show(message, "client code");
}
```
在指令碼中使用 window.external 物件來存取指定物件的公用屬性和方法。

下列 HTML 程式碼示範如何按一下按鈕來呼叫指令碼物件上的方法。將這段程式碼複製到您使用控制項的 Navigate 方法載入或指派給控制項 DocumentText 屬性的 HTML 文件的 BODY 項目中。
```
<button onclick="window.external.Test('called from script code')">
    call client code from script code
</button>
```
實作應用程式程式碼要使用的指令碼函式。

下列 HTML SCRIPT 項目提供一個範例函式。將這段程式碼複製到您使用控制項的 Navigate 方法載入或指派給控制項 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 檔案載入。

Imports System
Imports System.Windows.Forms
Imports System.Security.Permissions

<PermissionSet(SecurityAction.Demand, Name:="FullTrust")> _
<System.Runtime.InteropServices.ComVisibleAttribute(True)> _
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

    Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) _
        Handles Me.Load

        webBrowser1.AllowWebBrowserDrop = False
        webBrowser1.IsWebBrowserContextMenuEnabled = False
        webBrowser1.WebBrowserShortcutsEnabled = False
        webBrowser1.ObjectForScripting = 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

    Public Sub Test(ByVal message As String)
        MessageBox.Show(message, "client code")
    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

using System;
using System.Windows.Forms;
using System.Security.Permissions;

[PermissionSet(SecurityAction.Demand, Name="FullTrust")]
[System.Runtime.InteropServices.ComVisibleAttribute(true)]
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);
        Load += new EventHandler(Form1_Load);
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        webBrowser1.AllowWebBrowserDrop = false;
        webBrowser1.IsWebBrowserContextMenuEnabled = false;
        webBrowser1.WebBrowserShortcutsEnabled = false;
        webBrowser1.ObjectForScripting = 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>";
    }

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

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

}