Вызов веб-кода из нативного кода

Использование элементов управления JavaScript в WebView2 позволяет настраивать собственные приложения в соответствии с вашими требованиями. В этой статье рассматривается использование JavaScript в WebView2, а также сведения о разработке с использованием расширенных возможностей и функций WebView2.

Подготовка к работе

В этой статье предполагается, что у вас уже есть рабочий проект. Если у вас нет проекта и вы хотите следовать указаниям, см. статью Начало работы с WebView2.

Основные функции WebView2

Используйте следующие функции для внедрения JavaScript в собственный код приложения WebView2:

API	Описание
ExecuteScriptAsync	Запуск JavaScript в элементе управления WebView2. Вызывайте этот метод после загрузки содержимого модели DOM страницы или завершения перехода. См. статью Начало работы с WebView2.
AddScriptToExecuteOnDocumentCreatedAsync	Выполняется на каждой странице при создании DOM. Вызовите этот метод после инициализации CoreWebView2.

Сценарий: результаты ExecuteScript, закодированные в JSON.

Поскольку результатом ExecuteScriptAsync является JSON-кодировка, если результатом оценки JavaScript является строка, ваш нативный код получит строку в кодировке JSON, а не значение строки.

Например, следующий код на стороне нативного кода выполняет сценарий, результатом которого является строка. Результирующая строка включает кавычки в начале, кавычки в конце и экранирующие косые черты:

string result = await coreWebView2.ExecuteScriptAsync(@"'example'");
Debug.Assert(result == "\"example\"");

Скрипт возвращает строку, кодируемую ExecuteScript JSON. Если веб-код уже вызывает JSON.stringify вызов, то результат дважды кодируется как строка JSON, значением которой является строка JSON.

В объект с кодировкой JSON включаются только те свойства, которые находятся непосредственно в результате; Унаследованные свойства не включаются в объект в кодировке JSON. Большинство объектов DOM наследуют все свойства, поэтому веб-код должен явно скопировать значения свойств в другой объект и вернуть этот объект в собственном коде. Например, вы можете:

Script	Результат
performance.memory	{}
(() => { const {totalJSHeapSize, usedJSHeapSize} = performance.memory; return {totalJSHeapSize, usedJSHeapSize}; })();	{"totalJSHeapSize":4434368,"usedJSHeapSize":2832912}

Когда мы возвращаем just performance.memory, мы не видим в результате ни одного из его свойств, потому что все свойства наследуются. Если вместо этого веб-код копирует определенные значения свойств в performance.memory новый объект и возвращает этот объект, то нативный код видит эти свойства в результате.

При выполнении сценария через ExecuteScriptAsync, этот сценарий запускается в глобальном контексте. Полезно хранить сценарий в анонимной функции, чтобы все переменные, которые вы определяете, не загрязняли глобальный контекст.

Например, вы можете:

• Если вы запустите сценарий const example = 10; более одного раза, последующие запуски сценария выдадут исключение, так как example было определено при первом запуске.

• Если вместо этого вы запустите сценарий (() => { const example = 10; })();example , переменная будет определена в контексте этой анонимной функции. Таким образом, он не загрязняет глобальный контекст и может быть запущен более одного раза.

Сценарий: запуск выделенного файла JavaScript

Вы можете получить доступ к выделенному файлу JavaScript из элемента управления WebView2.

Встроенный код JavaScript хорошо подходит для быстрых команд JavaScript. Однако встроенный код JavaScript не поддерживает цветовые темы и форматирование строк в редакторе кода. Это затрудняет написание больших разделов кода, например, в Visual Studio.

Чтобы решить эту проблему, создайте отдельный файл JavaScript, содержащий ваш код, и передайте ссылку на этот файл с помощью ExecuteScriptAsync параметров.

Чтобы создать и использовать отдельный выделенный JS-файл, выполните следующие действия.

1. .js Создайте файл в проекте и добавьте код JavaScript, который вы хотите запустить. Например, создайте файл с именем script.js.

2. Преобразуйте файл JavaScript в строку, которая передается в ExecuteScriptAsync, вставив следующий код после перехода по странице:

   string text = System.IO.File.ReadAllText(@"C:\PATH_TO_YOUR_FILE\script.js");
   

3. Передайте text переменную в ExecuteScriptAsync:

   await webView.CoreWebView2.ExecuteScriptAsync(text);
   

Сценарий: удаление функции перетаскивания

В этом разделе для удаления функции перетаскивания из элемента управления WebView2 используется JavaScript.

Для начала ознакомьтесь с текущей функцией перетаскивания:

1. .txt Создайте файл, чтобы его можно было перетащить. Например, создайте файл с именем contoso.txt и добавьте в него текст.

2. Нажмите клавишу F5, чтобы выполнить сборку и запуск проекта.

3. Перетащите contoso.txt файл в элемент управления WebView2. Откроется новое окно, являющееся результатом кода в вашем примере проекта:

   

4. Далее добавьте код, чтобы удалить функцию перетаскивания из элемента управления WebView2. Вставьте следующий код после инициализации объекта CoreWebView2 в коде:

   await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(
      "window.addEventListener('dragover',function(e){e.preventDefault();},false);" +
      "window.addEventListener('drop',function(e){" +
         "e.preventDefault();" +
         "console.log(e.dataTransfer);" +
         "console.log(e.dataTransfer.files[0])" +
      "}, false);");
   

5. Нажмите клавишу F5, чтобы выполнить сборку и запуск проекта.

6. Попробуйте перетащить contoso.txt элемент управления WebView2. Убедитесь, что перетаскивание невозможно.

Сценарий: удаление контекстного меню

В этом разделе вы удалите контекстное меню из элемента управления WebView2.

Для начала изучите текущую функциональность контекстного меню:

1. Нажмите клавишу F5, чтобы выполнить сборку и запуск проекта.

2. Щелкните правой кнопкой мыши в любом месте элемента управления WebView2. В контекстном меню отображаются стандартные команды контекстного меню:

   

   Далее добавьте код для удаления функции контекстного меню из элемента управления WebView2.

3. Вставьте следующий код после инициализации объекта CoreWebView2 в коде:

   await webView.CoreWebView2.ExecuteScriptAsync("window.addEventListener('contextmenu', window => {window.preventDefault();});");
   

4. Нажмите клавишу F5, чтобы выполнить сборку и запуск проекта. Убедитесь, что не можете открыть контекстное меню.

См. также

• Начало работы с WebView2
• Репозиторий WebView2Samples — исчерпывающий пример возможностей WebView2.
• Справочные материалы по API WebView2
• Взаимодействие с веб-специалистами и собственнымразработчиком в обзоре API WebView2.