Практическое руководство. Реализация Two-Way взаимодействия между кодом DHTML и клиентским кодом приложения

Вы можете использовать элемент управления WebBrowser, чтобы добавлять существующий код динамического HTML (DHTML) веб-приложений в клиентские приложения Windows Forms. Это полезно, если вы вложили значительное время разработки в создание элементов управления на основе DHTML, и вы хотите воспользоваться преимуществами расширенных возможностей пользовательского интерфейса Windows Forms, не перезаписывая существующий код.

Элемент управления WebBrowser позволяет реализовать двустороннее взаимодействие между кодом клиентского приложения и кодом скриптов веб-страниц с помощью свойств ObjectForScripting и Document. Кроме того, вы можете настроить элемент управления WebBrowser таким образом, чтобы веб-элементы управления легко сочетались с другими элементами управления в форме приложения, скрывая реализацию DHTML. Чтобы легко смешать элементы управления, отформатируйте страницу, чтобы его цвет фона и визуальный стиль соответствовали остальной части формы, и используйте свойства AllowWebBrowserDrop, IsWebBrowserContextMenuEnabledи WebBrowserShortcutsEnabled, чтобы отключить стандартные функции браузера.

Внедрение DHTML в приложение Windows Forms

1. Задайте свойству WebBrowser элемента управления AllowWebBrowserDrop значение false, чтобы предотвратить открытие файлов, сброшенных на элемент управления WebBrowser.

   webBrowser1.AllowWebBrowserDrop = false;
   

   webBrowser1.AllowWebBrowserDrop = False
   

2. Задайте свойству IsWebBrowserContextMenuEnabled элемента управления значение false, чтобы предотвратить отображение контекстного меню элемента управления WebBrowser, когда пользователь щелкает его правой кнопкой мыши.

   webBrowser1.IsWebBrowserContextMenuEnabled = false;
   

   webBrowser1.IsWebBrowserContextMenuEnabled = False
   

3. Задайте свойству WebBrowserShortcutsEnabled элемента управления значение false, чтобы предотвратить реагирование WebBrowser элемента управления на сочетания клавиш.

   webBrowser1.WebBrowserShortcutsEnabled = false;
   

   webBrowser1.WebBrowserShortcutsEnabled = False
   

4. Задайте свойство ObjectForScripting в конструкторе формы или переопределите метод OnLoad.

   В следующем коде для объекта скрипта используется класс формы.

   webBrowser1.ObjectForScripting = new MyScriptObject(this);
   

   webBrowser1.ObjectForScripting = New MyScriptObject(Me)
   

5. Реализуйте объект скриптов.

   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. Используйте объект window.external в коде скрипта для доступа к общедоступным свойствам и методам указанного объекта.

   В следующем HTML-коде показано, как вызвать метод в объекте скриптирования из нажатия кнопки. Скопируйте этот код в элемент BODY HTML-документа, который загружается с помощью метода Navigate элемента управления или который назначается свойству DocumentText элемента управления.

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

7. Реализуйте функции в коде скрипта, который будет использовать код приложения.

   Следующий элемент HTML SCRIPT предоставляет пример функции. Скопируйте этот код в элемент HEAD HTML-документа, который загружается с помощью метода Navigate элемента управления или которому присваивается свойство DocumentText элемента управления.

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

8. Используйте свойство Document для доступа к коду скрипта из клиентского кода приложения.

   Например, добавьте следующий код в обработчик событий кнопки Click.

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

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

9. После того как вы завершите отладку 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-код загружается в элемент управления WebBrowser с помощью свойства DocumentText вместо загрузки из отдельного HTML-файла.

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

Компиляция кода

Для этого кода требуется:

• Ссылки на сборки System и System.Windows.Forms.

См. также

• WebBrowser
• WebBrowser.Document
• WebBrowser.ObjectForScripting
• элемент управления WebBrowser