Cara: Menerapkan komunikasi Two-Way Antara Kode DHTML dan Kode Aplikasi Klien

Anda dapat menggunakan kontrol WebBrowser untuk menambahkan kode aplikasi Web HTML dinamis (DHTML) yang ada ke aplikasi klien Windows Forms Anda. Ini berguna ketika Anda telah menginvestasikan waktu pengembangan yang signifikan dalam membuat kontrol berbasis DHTML dan Anda ingin memanfaatkan kemampuan antarmuka pengguna yang kaya dari Windows Forms tanpa harus menulis ulang kode yang ada.

Kontrol WebBrowser memungkinkan Anda menerapkan komunikasi dua arah antara kode aplikasi klien dan kode skrip halaman Web Anda melalui properti ObjectForScripting dan Document. Selain itu, Anda dapat mengonfigurasi kontrol WebBrowser sehingga kontrol Web Anda berbaur dengan mulus dengan kontrol lain pada formulir aplikasi Anda, menyembunyikan implementasi DHTML mereka. Untuk memadukan kontrol dengan mulus, format halaman yang ditampilkan sehingga warna latar belakang dan gaya visualnya cocok dengan sisa formulir, dan gunakan properti AllowWebBrowserDrop, IsWebBrowserContextMenuEnabled, dan WebBrowserShortcutsEnabled untuk menonaktifkan fitur browser standar.

Untuk menyematkan DHTML di aplikasi Windows Forms Anda

1. Atur properti WebBrowser kontrol AllowWebBrowserDrop ke false untuk mencegah kontrol WebBrowser membuka file yang dijatuhkan ke dalamnya.

   webBrowser1.AllowWebBrowserDrop = false;
   

   webBrowser1.AllowWebBrowserDrop = False
   

2. Atur properti IsWebBrowserContextMenuEnabled kontrol ke false untuk mencegah kontrol WebBrowser menampilkan menu pintasannya saat pengguna mengklik kanannya.

   webBrowser1.IsWebBrowserContextMenuEnabled = false;
   

   webBrowser1.IsWebBrowserContextMenuEnabled = False
   

3. Atur properti WebBrowserShortcutsEnabled kontrol ke false untuk mencegah kontrol WebBrowser merespons tombol pintasan.

   webBrowser1.WebBrowserShortcutsEnabled = false;
   

   webBrowser1.WebBrowserShortcutsEnabled = False
   

4. Atur properti ObjectForScripting di konstruktor formulir atau ambil alih metode OnLoad.

   Kode berikut menggunakan kelas formulir itu sendiri untuk objek pembuatan skrip.

   webBrowser1.ObjectForScripting = new MyScriptObject(this);
   

   webBrowser1.ObjectForScripting = New MyScriptObject(Me)
   

5. Terapkan objek pembuatan skrip Anda.

   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
   

6. Gunakan objek window.external dalam kode skrip Anda untuk mengakses properti publik dan metode objek yang ditentukan.

   Kode HTML berikut menunjukkan cara memanggil metode pada objek pembuatan skrip dari klik tombol. Salin kode ini ke elemen BODY dari dokumen HTML yang Anda muat menggunakan metode Navigate kontrol tersebut atau yang Anda tetapkan ke properti DocumentText kontrol tersebut.

   <button onclick="window.external.Test('called from script code')">
       call client code from script code
   </button>
   

7. Terapkan fungsi dalam kode skrip Anda yang akan digunakan kode aplikasi Anda.

   Elemen SKRIP HTML berikut menyediakan fungsi contoh. Salin kode ini ke elemen HEAD di dokumen HTML yang Anda buka dengan menggunakan metode Navigate dari kontrol atau yang Anda tetapkan ke properti DocumentText dari kontrol.

   <script>
   function test(message) {
       alert(message);
   }
   </script>
   

8. Gunakan properti Document untuk mengakses kode skrip dari kode aplikasi klien Anda.

   Misalnya, tambahkan kode berikut ke tombol Click penanganan aktivitas.

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

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

9. Setelah selesai melakukan debugging DHTML Anda, atur properti ScriptErrorsSuppressed kontrol ke true untuk mencegah kontrol WebBrowser menampilkan pesan kesalahan untuk masalah kode skrip.

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

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

Contoh

Contoh kode lengkap berikut menyediakan aplikasi demonstrasi yang dapat Anda gunakan untuk memahami fitur ini. Kode HTML dimuat ke dalam kontrol WebBrowser melalui properti DocumentText alih-alih dimuat dari file HTML terpisah.

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

Mengkompilasi Kode

Kode ini memerlukan:

• Referensi ke assembly System dan System.Windows.Forms.

Lihat juga

• WebBrowser
• WebBrowser.Document
• WebBrowser.ObjectForScripting
• Kontrol WebBrowser