Использование кадров в приложениях WebView2

  • Статья

Кадры позволяют внедрять другие веб-страницы в собственную веб-страницу. Фрейм — это подстраница или область на веб-странице, например веб-страница на веб-странице.

Iframe — это один из типов кадров. Другие типы кадров: frameset, portal, embed, fencedFrameи object. Тип main WebView2 для кадров — CoreWebView2Frame, который в настоящее время включен для iframes верхнего уровня. Планируется поддержка других типов кадров.

WebView2 поддерживает API-интерфейсы для взаимодействия с iframes. Варианты действий:

  • Узнайте, когда создаются iframes.
  • Узнайте, когда iframes переходят по другому URL-адресу. Это работает так же, как события навигации на компьютере состояния для приложений WebView2.
  • Обмен данными между ведущим приложением и iframes, отправляя сообщения в обоих направлениях.
  • Разрешите приложению игнорировать X-Frame-Options заголовок HTTP-ответа.

См. также:

Подпишитесь на событие FrameCreated, чтобы получить кадр

Для взаимодействия с кадрами в ведущем приложении сначала нужно подписаться на FrameCreated событие, чтобы ведущее приложение получите объект кадра. Событие FrameCreated возникает при каждом создании нового кадра. После того как ведущее приложение получит объект кадра, используйте его для отслеживания изменений и взаимодействия с этим кадром.

Ведущее приложение должно отслеживать время существования кадра, подписавшись на событие, так как при уничтожении кадра ведущее приложение больше не сможет ссылаться CoreWebView2Frame.Destroyed на этот кадр. Кадры создаются и уничтожаются во время каждой новой навигации веб-страницы. Используйте метод , CoreWebView2Frame.IsDestroyed чтобы проверка, существует ли кадр.

См. также:

  • iframes in Overview of WebView2 features and API.

После создания кадра он переходит к исходному URL-адресу кадра. В iframe используются события навигации и навигации, такие как FrameNavigationStarting и NavigationCompleted. Когда кадр переходит к исходному URL-адресу, возникают следующие события навигации:

  • NavigationStarting
  • ContentLoading
  • HistoryChanged
  • DOMContentLoaded
  • NavigationCompleted

Частота навигации в кадре

Навигация может происходить в пределах кадра. В качестве простого варианта использования атрибут элемента iframesource является URL-адресом, например wikipedia.com, и URL-адрес загружается в iframe. Обычно навигация происходит сразу после создания кадра. Затем ContentLoadingсоздаются события , DOMContentLoadedи NavigationCompleted .

Сам кадр перемещается. Веб-страница переходит по URL-адресу. Аналогичным образом, фрейм может перемещаться.

После создания кадра он будет перемещаться по ведущему приложению. Чтобы отслеживать, что происходит на странице main, события, такие как NavigationStarting, NavigationCompletedи HistoryChanged позволяют ведущему приложению перемещаться между фреймами или веб-страницами. Кадры переходят по новому URL-адресу реже, чем веб-страницы, но поддерживается тот же стиль навигации. Пользователь обычно не может перемещаться внутри кадра, хотя JavaScript включает это; кадр обычно является статическим в отношении навигации.

См. также:

События навигации:

Что касается повторяющихся эквивалентных NavigationStarting событий и NavigationCompleted , то рекомендуется использовать события в CoreWebView2Frame , а не эквивалентные, заменяемые событиями в CoreWebView2, так как CoreWebView2Frame тип поддерживает больше сценариев, позволяющих взаимодействовать с кадрами.

См. также:

Использование объектов узла в iframe

Для взаимодействия между собственной стороной ведущего приложения и JavaScript в iframe используйте объекты узла. Объект узла — это объект, который создается в хост-приложении, а затем используется из кода JavaScript на веб-странице приложения.

Использование собственных API-интерфейсов из скрипта в кадре с помощью ведущего объекта похоже на структуру страницы веб-взаимодействия или собственного взаимодействия, как описано в статье Вызов собственного кода из веб-кода:

Чтобы использовать объекты узла в iframe, выполните следующие действия:

  1. Определите объект узла и реализуйте IDispatch.
  2. Добавьте объект узла на стороне собственного кода с помощью AddHostObjectToScriptWithOrigins (Win32) или AddHostObjectToScript (.NET).
  3. Из JavaScript в веб-коде доступ к этому объекту узла с помощью chrome.webview.hostObjects.<name> API.

Для доступа к собственным объектам JavaScript и управления ими в кадре используйте AddHostObjectToScriptWithOrigins параметр (Win32) или CoreWebView2Frame.AddHostObjectToScript (.NET).origins Параметр origins указывает, к каким URL-адресам iframe будет разрешен доступ по соображениям безопасности. Этот параметр определяет URL-адреса, для которых iframes будут иметь доступ к объекту узла.

При переходе кадра по URL-адресу, отсутствующему в origins списке, фрейм не сможет управлять ведущим объектом. Фрейм не сможет читать или записывать свойства. См. таблицу Имя метода в методе AddHostObjectToScript для вашей платформы. См. следующие две строки:

  • applyHostFunction, getHostPropertyи setHostProperty.
  • getLocalProperty и setLocalProperty.

Приведенный выше метод работает следующим образом:

  • Метод CoreWebView2.AddHostObjectToScript. См. таблицу Имя метода . Прочтите оба раздела справочника по API, хотя для кадров вместо этого следует использовать метод, поддерживающий origins параметр .

Пример кода

См . раздел Шаг 6. Вызов AddHostObjectToScript, чтобы передать объект узла в веб-код в разделе Вызов собственного кода из веб-кода.

См. также:

Отправка и получение сообщений

Сообщения можно отправлять между собственным приложением и кодом JavaScript, который находится в iframe:

  • Сообщения из JavaScript можно отправлять в iframe на HTML-странице в ведущее приложение.
  • Сообщения из ведущего приложения можно отправлять на JavaScript в iframe на HTML-странице.

Отправка веб-сообщений из iframe в ведущее приложение

Чтобы отправить веб-сообщения из iframe в ведущее приложение, используйте window.chrome.webview.postMessage метод :

window.chrome.webview.postMessage(`SetTitleText ${titleText.value}`);

Чтобы получать эти сообщения в ведущем приложении, ведущее приложение должно подписаться на WebMessageReceived event.

Отправка сообщений из ведущего приложения в iframe

Ведущее приложение отправляет сообщения в iframe, вызывая PostWebMessageAsJson метод или PostWebMessageAsString .

Iframe получает сообщение, подписавшись на window.chrome.webview.addEventListener('message') событие следующим образом:

window.chrome.webview.addEventListener('message', arg => {
    // implement event listener here
});

См. также:

Выполнение кода JavaScript в iframes с помощью ExecuteScript

Приложение WebView2 может запускать любой JavaScript в кадре с помощью ExecuteScript.

Чтобы скрипт выполнялся в iframe, необходимо создать контекст выполнения. Контекст выполнения создается после ContentLoading события, поэтому, если ExecuteScript вызывается перед ContentLoading событием, скрипт не будет выполняться и строка null будет возвращена.

Сведения о событии см. в ContentLoading разделе События навигации для приложений WebView2, которые допустимы для кадров, а также веб-страниц.

См. также:

Изменение сетевых событий с помощью WebResourceRequested события в iframes

Эта функция является экспериментальной

Для iframes можно прослушивать сетевые события и изменять их с помощью WebResourceRequested события .

См. также:

Ознакомьтесь с последними предварительными версиями API. Следующие ссылки содержат .1.0.1466-prerelease В раскрывающемся списке Версия в левом верхнем углу справочной документации по API выберите последнюю предварительную версию.

Игнорирование X-Frame-Options для отображения веб-страницы внутри кадра

Заголовок X-Frame-Options HTTP-ответа используется веб-страницами, чтобы предотвратить отрисовку этой веб-страницы приложением внутри кадра. Свойство AdditionalAllowedFrameAncestors позволяет приложению обходить X-Frame-Options заголовок, чтобы отобразить веб-страницу внутри кадра.

См. также:

Пример использования iframes в хост-приложении

В этом примере кода показано, как использовать API кадра, в том числе:

  • FrameCreated
    • CoreWebView2FrameCreatedEventArgs
  • DOMContentLoaded
    • CoreWebView2DOMContentLoadedEventArgs
  • ExecuteScript

Этот пример кода сокращен из MainWindow.xaml.cs в примере WebView2WpfBrowser .

        void DOMContentLoadedCmdExecuted(object target, ExecutedRoutedEventArgs e)
        {
            // Subscribe to the FrameCreated event to obtain the frame object when 
            // it's created.
            webView.CoreWebView2.FrameCreated += WebView_FrameCreatedDOMContentLoaded;
            webView.NavigateToString(@"<!DOCTYPE html>" +
                                      "<h1>DOMContentLoaded sample page</h1>" +
                                      "<h2>The content to the iframe and below will be added after DOM content is loaded </h2>" +
                                      "<iframe style='height: 200px; width: 100%;'/>");
        }

        void WebView_FrameCreatedDOMContentLoaded(object sender, CoreWebView2FrameCreatedEventArgs args)
        {
            // In order for ExecuteScriptAsync to successfully run inside the iframe, 
            // subscribe to the ContentLoading or DOMContentLoaded event.  Once these 
            // events are raised, you can call ExecuteScriptAsync.
            args.Frame.DOMContentLoaded += (frameSender, DOMContentLoadedArgs) =>
            {
                args.Frame.ExecuteScriptAsync(
                    "let content = document.createElement(\"h2\");" +
                    "content.style.color = 'blue';" +
                    "content.textContent = \"This text was added to the iframe by the host app\";" +
                    "document.body.appendChild(content);");
            };
        }

Обзор справочника по API

Следующие функции, перечисленные в разделе Обзор функций и API WebView2, включают API, связанные с кадрами:

См. также

Внешние страницы: