Comment : implémenter la communication Two-Way entre le code DHTML et le code de l'application côté client

Vous pouvez utiliser le contrôle WebBrowser pour ajouter du code d’application web HTML dynamique (DHTML) existant à vos applications clientes Windows Forms. Cela est utile lorsque vous avez investi beaucoup de temps de développement dans la création de contrôles basés sur DHTML et que vous souhaitez tirer parti des fonctionnalités d’interface utilisateur enrichies de Windows Forms sans avoir à réécrire du code existant.

Le contrôle WebBrowser vous permet d’implémenter une communication bidirectionnelle entre le code de votre application cliente et le code de script de page Web via les propriétés ObjectForScripting et Document. En outre, vous pouvez configurer le contrôle WebBrowser afin que vos contrôles Web s’intègrent en toute transparence avec d’autres contrôles sur votre formulaire d’application, masquant leur implémentation DHTML. Pour fusionner en toute transparence les contrôles, mettez en forme la page affichée afin que sa couleur d’arrière-plan et son style visuel correspondent au reste du formulaire, puis utilisez les propriétés AllowWebBrowserDrop, IsWebBrowserContextMenuEnabledet WebBrowserShortcutsEnabled pour désactiver les fonctionnalités de navigateur standard.

Pour incorporer DHTML dans votre application Windows Forms

1. Définissez la propriété AllowWebBrowserDrop du contrôle WebBrowser sur false pour empêcher le contrôle WebBrowser d’ouvrir les fichiers qui y sont déposés.

   webBrowser1.AllowWebBrowserDrop = false;
   

   webBrowser1.AllowWebBrowserDrop = False
   

2. Définissez la propriété IsWebBrowserContextMenuEnabled du contrôle sur false pour empêcher le contrôle WebBrowser d’afficher son menu contextuel lorsque l’utilisateur clique dessus avec le bouton droit.

   webBrowser1.IsWebBrowserContextMenuEnabled = false;
   

   webBrowser1.IsWebBrowserContextMenuEnabled = False
   

3. Définissez la propriété WebBrowserShortcutsEnabled du contrôle sur false pour empêcher le contrôle WebBrowser de répondre aux touches de raccourci.

   webBrowser1.WebBrowserShortcutsEnabled = false;
   

   webBrowser1.WebBrowserShortcutsEnabled = False
   

4. Définissez la propriété ObjectForScripting dans le constructeur du formulaire ou remplacez la méthode OnLoad.

   Le code suivant utilise la classe de formulaire elle-même pour l’objet de script.

   webBrowser1.ObjectForScripting = new MyScriptObject(this);
   

   webBrowser1.ObjectForScripting = New MyScriptObject(Me)
   

5. Implémentez votre objet de script.

   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. Utilisez l’objet window.external dans votre code de script pour accéder aux propriétés et méthodes publiques de l’objet spécifié.

   Le code HTML suivant montre comment appeler une méthode sur l’objet de script à partir d’un clic de bouton. Copiez ce code dans l’élément BODY d’un document HTML que vous chargez à l’aide de la méthode Navigate du contrôle ou que vous affectez à la propriété DocumentText du contrôle.

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

7. Implémentez des fonctions dans votre code de script que votre code d’application utilisera.

   L’élément HTML SCRIPT suivant fournit un exemple de fonction. Copiez ce code dans l’élément HEAD d’un document HTML que vous chargez à l’aide de la méthode Navigate du contrôle ou que vous affectez à la propriété DocumentText du contrôle.

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

8. Utilisez la propriété Document pour accéder au code de script à partir de votre code d’application cliente.

   Par exemple, ajoutez le code suivant à un bouton Click gestionnaire d’événements.

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

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

9. Lorsque vous avez terminé le débogage de votre DHTML, définissez la propriété ScriptErrorsSuppressed du contrôle sur true pour empêcher le contrôle WebBrowser d’afficher des messages d’erreur pour les problèmes de code de script.

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

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

Exemple

L’exemple de code complet suivant fournit une application de démonstration que vous pouvez utiliser pour comprendre cette fonctionnalité. Le code HTML est chargé dans le contrôle WebBrowser via la propriété DocumentText au lieu d’être chargé à partir d’un fichier HTML distinct.

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

Compilation du code

Ce code nécessite :

• Références aux assemblies System et System.Windows.Forms.

Voir aussi

• WebBrowser
• WebBrowser.Document
• WebBrowser.ObjectForScripting
• contrôle de navigateur Web