Hoe Two-Way-communicatie tussen DHTML-code en clienttoepassingscode te implementeren

U kunt het besturingselement WebBrowser gebruiken om bestaande dynamische HTML-webtoepassingscode (DHTML) toe te voegen aan uw Windows Forms-clienttoepassingen. Dit is handig wanneer u aanzienlijke ontwikkelingstijd hebt geïnvesteerd in het maken van op DHTML gebaseerde besturingselementen en u wilt profiteren van de uitgebreide gebruikersinterfacemogelijkheden van Windows Forms zonder dat u bestaande code hoeft te herschrijven.

Met het besturingselement WebBrowser kunt u tweerichtingscommunicatie tussen de code van de clienttoepassing en de scriptcode van uw webpagina implementeren via de eigenschappen ObjectForScripting en Document. Daarnaast kunt u het WebBrowser besturingselement zo configureren dat uw webbesturingselementen naadloos worden gecombineerd met andere besturingselementen in uw toepassingsformulier, waardoor de DHTML-implementatie wordt verborgen. Als u de besturingselementen naadloos wilt combineren, maakt u de weergegeven pagina zodanig op dat de achtergrondkleur en de visuele stijl overeenkomen met de rest van het formulier en gebruikt u de eigenschappen AllowWebBrowserDrop, IsWebBrowserContextMenuEnableden WebBrowserShortcutsEnabled om standaardbrowserfuncties uit te schakelen.

DHTML insluiten in uw Windows Forms-toepassing

1. Stel de eigenschap AllowWebBrowserDrop van het WebBrowser-besturingselement in op false om te voorkomen dat het WebBrowser-besturingselement bestanden opent die erop zijn neergezet.

   webBrowser1.AllowWebBrowserDrop = false;
   

   webBrowser1.AllowWebBrowserDrop = False
   

2. Stel de eigenschap IsWebBrowserContextMenuEnabled van het besturingselement in op false om te voorkomen dat het WebBrowser besturingselement het snelmenu weergeeft wanneer de gebruiker er met de rechtermuisknop op klikt.

   webBrowser1.IsWebBrowserContextMenuEnabled = false;
   

   webBrowser1.IsWebBrowserContextMenuEnabled = False
   

3. Stel de eigenschap WebBrowserShortcutsEnabled van het besturingselement in op false om te voorkomen dat het besturingselement WebBrowser reageert op sneltoetsen.

   webBrowser1.WebBrowserShortcutsEnabled = false;
   

   webBrowser1.WebBrowserShortcutsEnabled = False
   

4. Stel de eigenschap ObjectForScripting in de constructor van het formulier in of overschrijf de methode OnLoad.

   De volgende code maakt gebruik van de formulierklasse zelf voor het scriptobject.

   webBrowser1.ObjectForScripting = new MyScriptObject(this);
   

   webBrowser1.ObjectForScripting = New MyScriptObject(Me)
   

5. Implementeer het scriptobject.

   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. Gebruik het window.external-object in uw scriptcode voor toegang tot openbare eigenschappen en methoden van het opgegeven object.

   De volgende HTML-code laat zien hoe u een methode aanroept voor het scriptobject vanaf een knopklik. Kopieer deze code naar het hoofdtekstelement van een HTML-document dat u laadt met behulp van de Navigate methode van het besturingselement of die u toewijst aan de eigenschap DocumentText van het besturingselement.

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

7. Implementeer functies in uw scriptcode die door uw toepassingscode worden gebruikt.

   Het volgende HTML SCRIPT-element biedt een voorbeeldfunctie. Kopieer deze code naar het HEAD-element van een HTML-document dat u laadt met behulp van de Navigate methode van het besturingselement of die u toewijst aan de eigenschap DocumentText van het besturingselement.

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

8. Gebruik de eigenschap Document om toegang te krijgen tot de scriptcode vanuit uw clienttoepassingscode.

   Voeg bijvoorbeeld de volgende code toe aan een button Click gebeurtenishandler.

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

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

9. Wanneer u klaar bent met het opsporen van fouten in uw DHTML, stelt u de eigenschap ScriptErrorsSuppressed van het besturingselement in op true om te voorkomen dat het WebBrowser besturingselement foutberichten weergeeft voor problemen met scriptcode.

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

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

Voorbeeld

Het volgende volledige codevoorbeeld bevat een demonstratietoepassing die u kunt gebruiken om deze functie te begrijpen. De HTML-code wordt in het WebBrowser besturingselement geladen via de eigenschap DocumentText in plaats van te worden geladen vanuit een afzonderlijk HTML-bestand.

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

De code compileren

Voor deze code is het volgende vereist:

• Verwijzingen naar de assembly's System en System.Windows.Forms.

Zie ook

• WebBrowser
• WebBrowser.Document
• WebBrowser.ObjectForScripting
• webbrowserbesturingselement