Comment : implémenter la communication bidirectionnelle entre le code DHTML et le code d'application cliente

Article
08/10/2011

Vous pouvez utiliser le contrôle WebBrowser pour ajouter du code d'application Web dynamique HTML (DHTML) existant à vos applications clientes Windows Forms. Cela est utile lorsque vous avez consacré beaucoup de temps de votre activité de développement à créer des contrôles DHTML et que vous souhaitez tirer parti des puissantes fonctions d'interface utilisateur des Windows Forms sans devoir réécrire le code existant.

Le contrôle WebBrowser vous permet d'implémenter une communication bidirectionnelle entre votre code d'application cliente et votre code de script de page Web à l'aide des propriétés ObjectForScripting et Document. De plus, vous pouvez configurer le contrôle WebBrowser afin que vos contrôles Web fusionne de façon homogène avec d'autres contrôles sur votre formulaire d'application, en masquant leur implémentation DHTML. Pour cela, 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, IsWebBrowserContextMenuEnabled et WebBrowserShortcutsEnabled pour désactiver les fonctionnalités standard du navigateur.

Pour incorporer du code DHTML dans votre application Windows Forms

Affectez à la propriété AllowWebBrowserDrop du contrôle WebBrowser la valeur false pour empêcher le contrôle WebBrowser d'ouvrir des fichiers qui y sont déposés.
```
webBrowser1.AllowWebBrowserDrop = False
```
```
webBrowser1.AllowWebBrowserDrop = false;
```
Affectez à la propriété IsWebBrowserContextMenuEnabled du contrôle la valeur false pour empêcher le contrôle WebBrowser d'afficher son menu contextuel lorsque l'utilisateur clique dessus avec le bouton droit de la souris.
```
webBrowser1.IsWebBrowserContextMenuEnabled = False
```
```
webBrowser1.IsWebBrowserContextMenuEnabled = false;
```
Affectez à la propriété WebBrowserShortcutsEnabled du contrôle la valeur false pour empêcher le contrôle WebBrowser de répondre aux touches de raccourci.
```
webBrowser1.WebBrowserShortcutsEnabled = False
```
```
webBrowser1.WebBrowserShortcutsEnabled = false;
```
Définissez la propriété ObjectForScripting dans le constructeur du formulaire ou dans un gestionnaire d'événements Load.

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

Notes

Le modèle COM (Component Object Model) doit pouvoir accéder à l'objet de script. Pour rendre votre formulaire visible par COM, ajoutez l'attribut ComVisibleAttribute à votre classe Form.
```
webBrowser1.ObjectForScripting = Me
```
```
webBrowser1.ObjectForScripting = this;
```
Implémentez des propriétés ou des méthodes publiques dans votre code d'application, que votre code de script utilisera.

Par exemple, si vous utilisez la classe de formulaire pour l'objet de script, ajoutez le code suivant à votre classe de formulaire.
```
Public Sub Test(ByVal message As String)
    MessageBox.Show(message, "client code")
End Sub
```
```
public void Test(String message)
{
    MessageBox.Show(message, "client code");
}
```
Utilisez l'objet window.external de votre code de script pour accéder aux propriétés et aux 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 sur un 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>
```
Implémentez les fonctions de 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>
```
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 au gestionnaire d'événements Click d'un bouton.
```
webBrowser1.Document.InvokeScript("test", _
    New String() {"called from client code"})
```
```
webBrowser1.Document.InvokeScript("test",
    new String[] { "called from client code" });
```
Une fois le débogage de votre code DHTML terminé, affectez à la propriété ScriptErrorsSuppressed du contrôle la valeur true afin d'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 à travers la propriété DocumentText au lieu d'être chargé à partir d'un fichier HTML séparé.

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" });
    }

}