`<webview>` тэг

Предупреждение

Тэг webview Electron основан на webview Chromium, который подвергается значительным архитектурным изменениям. Это влияет на стабильность webviews, включая отрисовку, навигацию и маршрутизацию событий. В настоящее время рекомендуется не использовать тэг webview и рассмотреть альтернативы, такие как iframe, BrowserView Electron или архитектуру, которая полностью избегает встроенного контента.

Включение

По умолчанию тэг webview отключен в Electron >= 5. Вам необходимо включить его, установив опцию webviewTag webPreferences при создании BrowserWindow. Более подробная информация представлена в документации конструктора BrowserWindow.

Обзор

Отображение внешнего веб-контента в изолированном фрейме и процессе.

Процесс: Рендеринг
Этот класс не экспортируется из модуля 'electron'. Он доступен только в качестве возвращаемого значения других методов API Electron.

Используйте тэг webview для вставки 'гостевого' контента (например, веб-страниц) в ваше приложение Electron. Гостевой контент содержится внутри контейнера webview. Встроенная страница в вашем приложении управляет тем, как отображается и структурируется гостевой контент.

В отличие от iframe, тэг webview выполняется в отдельном процессе по сравнению с вашим приложением. Он не имеет таких же прав доступа, как ваша веб-страница, и все взаимодействия между вашим приложением и встроенным контентом будут асинхронными. Это защищает ваше приложение от встроенного контента. Примечание: Большинство методов, вызываемых на веб-вью из страницы-хоста, требуют синхронного вызова в основной процесс.

Пример

Чтобы встроить веб-страницу в ваше приложение, добавьте тэг webview на страницу встраивания вашего приложения (эта страница отобразит гостевой контент). В простейшем виде тэг webview включает src веб-страницы и CSS-стили, которые управляют отображением контейнера webview:

<webview id="foo" src="https://www.github.com/" style="display:inline-flex; width:640px; height:480px"></webview>

Если вы хотите каким-либо образом управлять гостевым контентом, вы можете написать JavaScript, который прослушивает события webview и реагирует на них с помощью методов webview. Вот пример кода с двумя обработчиками событий: один прослушивает загрузку веб-страницы, другой – завершение загрузки и отображает сообщение "Загрузка..." во время загрузки:

<script>
  onload = () => {
    const webview = document.querySelector('webview')
    const indicator = document.querySelector('.indicator')

    const loadstart = () => {
      indicator.innerText = 'loading...'
    }

    const loadstop = () => {
      indicator.innerText = ''
    }

    webview.addEventListener('did-start-loading', loadstart)
    webview.addEventListener('did-stop-loading', loadstop)
  }
</script>

Внутренняя реализация

Внутри webview реализовано с помощью Out-of-Process iframes (OOPIFs). Тэг webview представляет собой по существу пользовательский элемент, использующий shadow DOM для обертывания элемента iframe внутри него.

Таким образом, поведение тэга webview очень похоже на iframe кросс-доменные, как в примерах:

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

Примечания по стилизации CSS

Обратите внимание, что стили тэга webview используют display:flex; внутри, чтобы обеспечить, что дочерний элемент iframe заполняет всю высоту и ширину контейнера webview при использовании традиционных и flexbox-макетов. Не перезаписывайте свойство CSS по умолчанию display:flex;, если не указываете display:inline-flex; для макета в один столбец.

Атрибуты тега

Тэг webview имеет следующие атрибуты:

`src`

<webview src="https://www.github.com/"></webview>

Значение string, представляющее видимый URL. Запись в этот атрибут инициирует навигацию верхнего уровня.

Назначение src своего собственного значения перезагрузит текущую страницу.

Атрибут src также может принимать данные URL, такие как data:text/plain,Hello, world!.

`nodeintegration`

<webview src="http://www.google.com/" nodeintegration></webview>

boolean атрибут. При его наличии гостевая страница в webview будет иметь Node.js интеграцию и сможет использовать Node.js API, такие как require и process, для доступа к ресурсам низкого уровня системы. По умолчанию интеграция Node.js отключена на гостевой странице.

`nodeintegrationinsubframes`

<webview src="http://www.google.com/" nodeintegrationinsubframes></webview>

Атрибут boolean для экспериментальной опции включения поддержки NodeJS в подфреймах, таких как iframe внутри webview. Все ваши предустановки загружаются для каждого iframe, вы можете использовать process.isMainFrame для определения, находитесь ли вы во фрейме основного уровня или нет. Эта опция отключена по умолчанию на гостевой странице.

`plugins`

<webview src="https://www.github.com/" plugins></webview>

boolean атрибут. При его наличии гостевая страница в webview сможет использовать плагины браузера. Плагины отключены по умолчанию.

`preload`

<!-- from a file -->
<webview src="https://www.github.com/" preload="./test.js"></webview>
<!-- or if you want to load from an asar archive -->
<webview src="https://www.github.com/" preload="./app.asar/test.js"></webview>

string атрибут, указывающий на скрипт, который будет загружен до выполнения других скриптов на гостевой странице. Протокол URL скрипта должен быть file: (даже при использовании asar: архивов), поскольку он загружается Node.js require под капотом, который рассматривает asar: архивы как виртуальные каталоги.

Если у гостевой страницы нет интеграции Node, этот скрипт по-прежнему будет иметь доступ ко всем Node.js API, но глобальные объекты, введённые Node.js, будут удалены после завершения выполнения этого скрипта.

`httpreferrer`

<webview src="https://www.github.com/" httpreferrer="http://cheng.guru"></webview>

string атрибут, устанавливающий URL-адрес отправителя для гостевой страницы.

`useragent`

<webview src="https://www.github.com/" useragent="Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; AS; rv:11.0) like Gecko"></webview>

string атрибут, устанавливающий пользовательский агент для гостевой страницы до навигации на страницу. После загрузки страницы используйте метод setUserAgent, чтобы изменить пользовательский агент.

`disablewebsecurity`

<webview src="https://www.github.com/" disablewebsecurity></webview>

boolean атрибут. При его наличии у гостевой страницы будет отключена безопасность веб-страницы. По умолчанию безопасность веб-страницы включена.

`partition`

<webview src="https://github.com" partition="persist:github"></webview>
<webview src="https://electronjs.org" partition="electron"></webview>

string атрибут, устанавливающий сеанс, используемый страницей. Если partition начинается с persist:, страница будет использовать постоянный сеанс, доступный всем страницам в приложении с тем же partition. Если нет префикса persist:, страница будет использовать сеанс в памяти. Назначение одинакового partition позволяет нескольким страницам совместно использовать один сеанс. Если partition не задан, будет использован сеанс приложения по умолчанию.

Это значение можно изменить только до первой навигации, так как сеанс активного процесса рендеринга не может быть изменён. Попытки изменить значение после этого приведут к ошибке DOM.

END_OF_DOCUMENT_MARKER

`allowpopups`

<webview src="https://www.github.com/" allowpopups></webview>

Атрибут boolean. Если этот атрибут присутствует, гостевая страница сможет открывать новые окна. По умолчанию всплывающие окна отключены.

`webpreferences`

<webview src="https://github.com" webpreferences="allowRunningInsecureContent, javascript=no"></webview>

А string, представляющий собой список строк, разделённых запятыми, который определяет веб-предпочтения, которые должны быть установлены на веб-вью. Полный список поддерживаемых строк предпочтений можно найти в BrowserWindow.

Строка имеет тот же формат, что и строка функций в window.open. Само по себе имя получает true значение булевого типа. Предпочтение может быть установлено на другое значение путём включения =, за которым следует значение. Специальные значения yes и 1 интерпретируются как true, в то время как no и 0 интерпретируются как false.

`enableblinkfeatures`

<webview src="https://www.github.com/" enableblinkfeatures="PreciseMemoryInfo, CSSVariables"></webview>

А string, представляющий собой список строк, разделённых ,, который определяет функции blink, которые должны быть включены. Полный список поддерживаемых строк функций можно найти в файле RuntimeEnabledFeatures.json5.

`disableblinkfeatures`

<webview src="https://www.github.com/" disableblinkfeatures="PreciseMemoryInfo, CSSVariables"></webview>

А string, представляющий собой список строк, разделённых ,, который определяет функции blink, которые должны быть отключены. Полный список поддерживаемых строк функций можно найти в файле RuntimeEnabledFeatures.json5.

Методы

Тег webview имеет следующие методы:

Примечание: Элемент веб-вью должен быть загружен перед использованием методов.

Пример

const webview = document.querySelector('webview')
webview.addEventListener('dom-ready', () => {
  webview.openDevTools()
})

`<webview>.loadURL(url[, options])`

url URL
options Объект (необязательно)
- httpReferrer (строка | Ссылка) (необязательно) - URL HTTP-ссылки.
- userAgent строка (необязательно) - Пользовательский агент, инициировавший запрос.
- extraHeaders строка (необязательно) - Дополнительные заголовки, разделённые "\n"
- postData (UploadRawData | UploadFile)[] (необязательно)
- baseURLForDataURL строка (необязательно) - Базовый URL (с заключительным разделителем пути) для файлов, которые должны быть загружены по URL-адресу данных. Это необходимо только в том случае, если указанный url является URL-адресом данных и необходимо загрузить другие файлы.

Возвращает Promise<void> - обещание выполнится, когда страница завершит загрузку (см. did-finish-load), и отклонится, если страница не загрузится (см. did-fail-load).

Загружает url в веб-вью, url должен содержать префикс протокола, например, http:// или file://.

`<webview>.downloadURL(url)`

url строка

Инициализирует загрузку ресурса по адресу url без навигации.

`<webview>.getURL()`

Возвращает string - URL гостевой страницы.

`<webview>.getTitle()`

Возвращает string - Заголовок гостевой страницы.

`<webview>.isLoading()`

Возвращает boolean - Загрузка ресурсов гостевой страницы всё ещё происходит.

`<webview>.isLoadingMainFrame()`

Возвращает boolean - Основной фрейм (а не только фреймы или фреймы внутри него) всё ещё загружается.

`<webview>.isWaitingForResponse()`

Возвращает boolean - Гостевая страница ждёт первого ответа на основной ресурс страницы.

`<webview>.stop()`

Останавливает любую ожидающую навигацию.

`<webview>.reload()`

Перезагружает гостевую страницу.

`<webview>.reloadIgnoringCache()`

Перезагружает гостевую страницу и игнорирует кэш.

`<webview>.canGoBack()`

Возвращает boolean - Возможно ли вернуться назад на гостевой странице.

`<webview>.canGoForward()`

Возвращает boolean - Возможно ли перейти вперёд на гостевой странице.

`<webview>.canGoToOffset(offset)`

offset Целое число

Возвращает boolean - Возможно ли перейти на offset.

`<webview>.clearHistory()`

Очищает историю навигации.

`<webview>.goBack()`

Переходит назад на гостевой странице.

`<webview>.goForward()`

Переходит вперёд на гостевой странице.

`<webview>.goToIndex(index)`

index Целое число

Переходит к указанному абсолютному индексу.

`<webview>.goToOffset(offset)`

offset Целое число

Переходит к указанному смещению от "текущей записи".

`<webview>.isCrashed()`

Возвращает boolean - произошла ли ошибка в процессе рендеринга.

`<webview>.setUserAgent(userAgent)`

userAgent строка

Переопределяет пользовательский агент для гостевой страницы.

`<webview>.getUserAgent()`

Возвращает string - пользовательский агент для гостевой страницы.

`<webview>.insertCSS(css)`

css строка

Возвращает Promise<string> - обещание, которое выполняется с ключом вставленного CSS, который впоследствии может быть использован для удаления CSS с помощью <webview>.removeInsertedCSS(key).

Вставляет CSS в текущую веб-страницу и возвращает уникальный ключ для вставленного стиля.

`<webview>.removeInsertedCSS(key)`

key строка

Возвращает Promise<void> - выполняется, если удаление прошло успешно.

END_OF_DOCUMENT_MARKER

Удаляет вставленный CSS из текущей веб-страницы. Стилизованный лист определяется по своему ключу, который возвращается из <webview>.insertCSS(css).

`<webview>.executeJavaScript(code[, userGesture])`

code строка
userGesture логическое значение (необязательно) - По умолчанию false.

Возвращает Promise<any> - промис, который разрешается результатом выполненного кода или отклоняется, если результат кода — отклоненный промис.

Выполняет code на странице. Если userGesture установлено, создаст контекст пользовательского жеста на странице. HTML-API, такие как requestFullScreen, требующие пользовательских действий, могут воспользоваться этим параметром для автоматизации.

`<webview>.openDevTools()`

Открывает окно DevTools для гостевой страницы.

`<webview>.closeDevTools()`

Закрывает окно DevTools гостевой страницы.

`<webview>.isDevToolsOpened()`

Возвращает boolean - наличие окна DevTools на гостевой странице.

`<webview>.isDevToolsFocused()`

Возвращает boolean - фокусировка окна DevTools гостевой страницы.

`<webview>.inspectElement(x, y)`

x Целое число
y Целое число

Начинает инспекцию элемента в позиции (x, y) гостевой страницы.

`<webview>.inspectSharedWorker()`

Открывает DevTools для контекста общего работника, присутствующего на гостевой странице.

`<webview>.inspectServiceWorker()`

Открывает DevTools для контекста service worker, присутствующего на гостевой странице.

`<webview>.setAudioMuted(muted)`

muted логическое значение

Устанавливает состояние звука на гостевой странице как немой.

`<webview>.isAudioMuted()`

Возвращает boolean - немой ли звук на гостевой странице.

`<webview>.isCurrentlyAudible()`

Возвращает boolean - воспроизводится ли звук в данный момент.

`<webview>.undo()`

Выполняет команду редактирования undo на странице.

`<webview>.redo()`

Выполняет команду редактирования redo на странице.

`<webview>.cut()`

Выполняет команду редактирования cut на странице.

`<webview>.copy()`

Выполняет команду редактирования copy на странице.

`<webview>.paste()`

Выполняет команду редактирования paste на странице.

`<webview>.pasteAndMatchStyle()`

Выполняет команду редактирования pasteAndMatchStyle на странице.

`<webview>.delete()`

Выполняет команду редактирования delete на странице.

`<webview>.selectAll()`

Выполняет команду редактирования selectAll на странице.

`<webview>.unselect()`

Выполняет команду редактирования unselect на странице.

`<webview>.replace(text)`

text строка

Выполняет команду редактирования replace на странице.

`<webview>.replaceMisspelling(text)`

text строка

Выполняет команду редактирования replaceMisspelling на странице.

`<webview>.insertText(text)`

text строка

Возвращает Promise<void>

Вставляет text в фокусированный элемент.

`<webview>.findInPage(text[, options])`

text строка - Искомое содержимое, не должно быть пустым.
options Объект (необязательно)
- forward логическое значение (необязательно) - Направление поиска (вперед или назад), по умолчанию true.
- findNext логическое значение (необязательно) - Начать новую сессию поиска с этим запросом. Должно быть true для начальных запросов и false для последующих запросов. По умолчанию false.
- matchCase логическое значение (необязательно) - Поиск регистрозависимый, по умолчанию false.

Возвращает Integer - идентификатор запроса.

Инициирует запрос на поиск всех совпадений text на веб-странице. Результат запроса можно получить, подписавшись на событие found-in-page.

`<webview>.stopFindInPage(action)`

action строка - Определяет действие при завершении запроса <webview>.findInPage.
- clearSelection - Очистить выделение.
- keepSelection - Вернуть выделение в обычное состояние.
- activateSelection - Сфокусироваться и нажать на узел выделения.

Останавливает любой запрос findInPage для webview с указанным action.

`<webview>.print([options])`

options Объект (необязательно)
- silent boolean (необязательно) - Не спрашивать пользователя о настройках печати. По умолчанию false.
- printBackground boolean (необязательно) - Печатать цвет фона и изображение веб-страницы. По умолчанию false.
- deviceName строка (необязательно) - Установите имя устройства принтера для использования. Должно быть определённым именем системы, а не «дружественным», например, 'Brother_QL_820NWB', а не 'Brother QL-820NWB'.
- color boolean (необязательно) - Установить, будет ли распечатанная веб-страница цветной или черно-белой. По умолчанию true.
- margins Объект (необязательно)
  - marginType строка (необязательно) - Может быть default, none, printableArea, или custom. Если выбрано custom, вам также необходимо указать top, bottom, left, и right.
  - top число (необязательно) - Верхнее поле отступа распечатанной веб-страницы в пикселях.
  - bottom число (необязательно) - Нижнее поле отступа распечатанной веб-страницы в пикселях.
  - left число (необязательно) - Левое поле отступа распечатанной веб-страницы в пикселях.
  - right число (необязательно) - Правое поле отступа распечатанной веб-страницы в пикселях.
- landscape boolean (необязательно) - Нужно ли печатать веб-страницу в альбомной ориентации. По умолчанию false.
- scaleFactor число (необязательно) - Масштаб веб-страницы.
- pagesPerSheet число (необязательно) - Количество страниц на листе.
- collate boolean (необязательно) - Необходимо ли сшивать страницы.
- copies число (необязательно) - Количество копий веб-страницы для печати.
- pageRanges Object[] (необязательно) - Диапазон страниц для печати.
  - from число - Индекс первой страницы для печати (нумерация с 0).
  - to число - Индекс последней страницы для печати (включительно) (нумерация с 0).
- duplexMode строка (необязательно) - Установите режим двусторонней печати распечатанной веб-страницы. Может быть simplex, shortEdge, или longEdge.
- dpi Record<string, number> (необязательно)
  - horizontal число (необязательно) - Горизонтальное разрешение (dpi).
  - vertical число (необязательно) - Вертикальное разрешение (dpi).
- header строка (необязательно) - Строка для печати в качестве заголовка страницы.
- footer строка (необязательно) - Строка для печати в качестве подвала страницы.
- pageSize строка | Размер (необязательно) - Укажите размер страницы печатного документа. Может быть A3, A4, A5, Legal, Letter, Tabloid или объект, содержащий height в микрометрах.

Возвращает Promise<void>

Распечатывает веб-страницу webview. То же, что и webContents.print([options]).

`<webview>.printToPDF(options)`

options Объект
- headerFooter Record<string, string> (необязательно) - Заголовок и подвал для PDF.
  - title строка - Заголовок для PDF.
  - url строка - URL для подвала PDF.
- landscape boolean (необязательно) - true для альбомной ориентации, false для книжной.
- marginsType Целое число (необязательно) - Указывает тип полей. 0 для стандартных полей, 1 для без полей, 2 для минимальных полей и width в микрометрах.
- scaleFactor число (необязательно) - Коэффициент масштаба веб-страницы. Может принимать значения от 0 до 100.
- pageRanges Record<string, number> (необязательно) - Диапазон страниц для печати. В macOS учитывается только первый диапазон.
  - from число - Индекс первой страницы для печати (нумерация с 0).
  - to число - Индекс последней страницы для печати (включительно) (нумерация с 0).
- pageSize строка | Размер (необязательно) - Укажите размер страницы создаваемого PDF. Может быть A3, A4, A5, Legal, Letter, Tabloid или объект, содержащий height
- printBackground boolean (необязательно) - Печатать ли фоны CSS.
- printSelectionOnly boolean (необязательно) - Печатать только выделенный фрагмент.

Возвращает Promise<Uint8Array> - Разрешение сгенерированного PDF-файла.

Распечатывает веб-страницу webview в формате PDF. То же, что и webContents.printToPDF(options).

`<webview>.capturePage([rect])`

rect Прямоугольник (необязательно) - Область страницы, которая должна быть захвачена.

Возвращает Promise<NativeImage> - Разрешение с изображением NativeImage

Делает снимок страницы в rect. Опуская rect захватывается вся видимая область страницы.

`<webview>.send(channel, ...args)`

channel строка
...args любой массив

Возвращает Promise<void>

Отправляет асинхронное сообщение в процесс рендеринга через channel, вы также можете отправить произвольные аргументы. Процесс рендеринга может обработать сообщение, прослушивая событие channel с модулем ipcRenderer.

См. webContents.send для примеров.

`<webview>.sendToFrame(frameId, channel, ...args)`

frameId [число, число] - [processId, frameId]
channel строка
...args любой массив

Возвращает Promise<void>

См. webContents.sendToFrame для примеров.

`<webview>.sendInputEvent(event)`

event Событие нажатия мыши | Событие прокрутки мыши | Событие нажатия клавиши

Возвращает Promise<void>

Отправляет событие ввода event на страницу.

См. webContents.sendInputEvent для подробного описания объекта event.

`<webview>.setZoomFactor(factor)`

factor число - Коэффициент масштабирования.

Изменяет коэффициент масштабирования на указанное значение. Коэффициент масштабирования — это процент масштабирования, делённый на 100, поэтому 300% = 3.0.

`<webview>.setZoomLevel(level)`

level число - Уровень масштабирования.

Изменяет уровень масштабирования на указанное значение. Исходный размер равен 0, и каждое увеличение или уменьшение соответствует увеличению или уменьшению масштаба на 20% относительно значения по умолчанию, соответственно, с максимальными значениями 300% и минимальными 50% от исходного размера. Формула для этого scale := 1.2 ^ level.

ПРИМЕЧАНИЕ: Политика масштабирования на уровне Chromium — одинаковая для всех доменов, т. е. уровень масштабирования для конкретного домена распространяется на все экземпляры окон с тем же доменом. Отличие URL окна обеспечит работу масштабирования в каждом окне.

`<webview>.getZoomFactor()`

Возвращает number - текущий коэффициент масштабирования.

`<webview>.getZoomLevel()`

Возвращает number - текущий уровень масштабирования.

`<webview>.setVisualZoomLevelLimits(minimumLevel, maximumLevel)`

minimumLevel число
maximumLevel число

Возвращает Promise<void>

Устанавливает максимальный и минимальный уровень масштабирования.

`<webview>.showDefinitionForSelection()` macOS

Отображает всплывающее окно словаря, которое ищет выделенное слово на странице.

`<webview>.getWebContentsId()`

Возвращает number - ID WebContents этого webview.

События DOM

Следующие события DOM доступны для тега webview:

Событие: 'load-commit'

Возвращает:

END_OF_DOCUMENT_MARKER

url строка
isMainFrame булево

Вызывается, когда загрузка завершена. Это включает навигацию внутри текущего документа, а также загрузки документов подфреймов, но не включает асинхронные загрузки ресурсов.

Событие: 'did-finish-load'

Вызывается, когда навигация завершена, т. е. индикатор загрузки вкладки перестанет вращаться, и будет вызвано событие onload.

Событие: 'did-fail-load'

Возвращает:

errorCode Целое число
errorDescription строка
validatedURL строка
isMainFrame булево

Это событие подобно did-finish-load, но оно срабатывает, когда загрузка завершилась неудачно или была отменена, например, когда вызвана window.stop().

Событие: 'did-frame-finish-load'

Возвращает:

isMainFrame булево

Вызывается, когда навигация во фрейме завершена.

Событие: 'did-start-loading'

Соответствует моментам, когда индикатор загрузки вкладки начинает вращаться.

Событие: 'did-stop-loading'

Соответствует моментам, когда индикатор загрузки вкладки останавливается.

Событие: 'did-attach'

Вызывается при подключении к содержимому веб-встраиваемого элемента.

Событие: 'dom-ready'

Вызывается, когда документ во фрейме загружен.

Событие: 'page-title-updated'

Возвращает:

title строка
explicitSet булево

Вызывается при изменении заголовка страницы во время навигации. explicitSet равно false, когда заголовок синтезируется из URL файла.

Событие: 'page-favicon-updated'

Возвращает:

favicons строка[] - Массив URL-адресов.

Вызывается, когда страница получает URL-адреса значков.

Событие: 'enter-html-full-screen'

Вызывается при переходе страницы в полноэкранный режим, инициированный HTML API.

Событие: 'leave-html-full-screen'

Вызывается при выходе страницы из полноэкранного режима, инициированного HTML API.

Событие: 'console-message'

Возвращает:

level Целое число - Уровень ведения журнала от 0 до 3. В соответствии с verbose, info, warning и error.
message строка - Само сообщение консоли
line Целое число - Номер строки источника, который вызвал это сообщение консоли
sourceId строка

Вызывается, когда гостевое окно записывает сообщение в консоль.

Следующий пример кода пересылает все сообщения журнала в консоль встраиваемого элемента, не обращая внимания на уровень ведения журнала или другие свойства.

const webview = document.querySelector('webview')
webview.addEventListener('console-message', (e) => {
  console.log('Guest page logged a message:', e.message)
})

Событие: 'found-in-page'

Возвращает:

result Объект
- requestId Целое число
- activeMatchOrdinal Целое число - Позиция активной совпадения.
- matches Целое число - Количество совпадений.
- selectionArea Прямоугольник - Координаты области первого совпадения.
- finalUpdate булево

Вызывается, когда доступен результат запроса webview.findInPage.

const webview = document.querySelector('webview')
webview.addEventListener('found-in-page', (e) => {
  webview.stopFindInPage('keepSelection')
})

const requestId = webview.findInPage('test')
console.log(requestId)

Событие: 'new-window'

Возвращает:

url строка
frameName строка
disposition строка - Может быть default, foreground-tab, background-tab, new-window, save-to-disk и other.
options BrowserWindowConstructorOptions - Параметры, которые должны быть использованы для создания нового BrowserWindow.

Вызывается, когда гостевая страница пытается открыть новое окно браузера.

Следующий пример кода открывает новый URL в системном браузере по умолчанию.

const { shell } = require('electron')
const webview = document.querySelector('webview')

webview.addEventListener('new-window', async (e) => {
  const protocol = (new URL(e.url)).protocol
  if (protocol === 'http:' || protocol === 'https:') {
    await shell.openExternal(e.url)
  }
})

Событие: 'will-navigate'

Возвращает:

url строка

Срабатывает, когда пользователь или страница хотят начать навигацию. Это может произойти, когда изменяется объект window.location или пользователь нажимает ссылку на странице.

Это событие не будет вызываться, когда навигация запускается программно с помощью API, таких как <webview>.loadURL и <webview>.back.

Также оно не вызывается во время навигации на странице, например, при нажатии на якорь или обновлении window.location.hash. Используйте событие did-navigate-in-page для этой цели.

Вызов event.preventDefault() НЕ оказывает никакого эффекта.

Возвращает:

url строка
isInPlace булево
isMainFrame булево
frameProcessId Целое число
frameRoutingId Целое число

Срабатывает, когда любой фрейм (включая основной) начинает навигацию. isInPlace будет true для навигации по странице.

Возвращает:

url строка
isInPlace булево
isMainFrame булево
frameProcessId Целое число
frameRoutingId Целое число

Срабатывает после перенаправления на серверной стороне во время навигации. Например, перенаправление 302.

Событие: 'did-navigate'

Возвращает:

url строка

Срабатывает, когда навигация завершена.

Это событие не вызывается для внутристраничной навигации, такой как нажатие на ссылки якорей или обновление window.location.hash. Используйте событие did-navigate-in-page для этой цели.

Событие: 'did-frame-navigate'

Возвращает:

url строка
httpResponseCode Целое число - -1 для навигации, не являющейся HTTP
httpStatusText строка - пустая для навигации, не являющейся HTTP
isMainFrame булево
frameProcessId Целое число
frameRoutingId Целое число

Срабатывает, когда завершена навигация по любому фрейму.

Это событие не вызывается для внутристраничной навигации, например, при нажатии на ссылки якорей или обновлении window.location.hash. Используйте событие did-navigate-in-page для этой цели.

Событие: 'did-navigate-in-page'

Возвращает:

isMainFrame булево
url строка

Срабатывает при внутристраничной навигации.

Когда происходит внутристраничная навигация, URL страницы изменяется, но не вызывает навигацию за пределами страницы. Примерами этого являются нажатие на ссылки якорей или срабатывание события DOM hashchange.

Событие: 'close'

Вызывается, когда гостевая страница пытается закрыть себя.

Следующий пример кода перенаправляет webview на about:blank при попытке гостевой страницы закрыть себя.

const webview = document.querySelector('webview')
webview.addEventListener('close', () => {
  webview.src = 'about:blank'
})

Событие: 'ipc-message'

Возвращает:

frameId [число, число] - пара [processId, frameId].
channel строка
args любой[]

Вызывается, когда гостевая страница отправляет асинхронное сообщение странице-встраивающему элементу.

С помощью метода sendToHost и события ipc-message вы можете взаимодействовать между гостевой страницей и страницей-встраивающим элементом.

END_OF_DOCUMENT_MARKER

// In embedder page.
const webview = document.querySelector('webview')
webview.addEventListener('ipc-message', (event) => {
  console.log(event.channel)
  // Prints "pong"
})
webview.send('ping')

// In guest page.
const { ipcRenderer } = require('electron')
ipcRenderer.on('ping', () => {
  ipcRenderer.sendToHost('pong')
})

Событие: 'crashed'

Срабатывает, когда процесс отрисовки зависает.

Событие: 'plugin-crashed'

Возвращает:

name строка
version строка

Срабатывает, когда зависает процесс плагина.

themeColor строка

Вызывается при изменении цвета темы страницы. Обычно это происходит при обнаружении тега meta:

<meta name='theme-color' content='#ff0000'>

Событие: 'update-target-url'

Возвращает:

url строка

Вызывается при перемещении курсора мыши над ссылкой или при переходе к ссылке с помощью клавиатуры.

params Объект
- x Целое число - координата x.
- y Целое число - координата y.
- linkURL строка - URL ссылки, содержащей узел, на котором было вызвано контекстное меню.
- linkText строка - Текст, связанный со ссылкой. Может быть пустой строкой, если содержимое ссылки — изображение.
- pageURL строка - URL главной страницы, на которой было вызвано контекстное меню.
- frameURL строка - URL подрамки, на которой было вызвано контекстное меню.
- srcURL строка - Исходный URL элемента, на котором было вызвано контекстное меню. У элементов с исходными URL-адресами это изображения, аудио и видео.
- mediaType строка - Тип узла, на котором было вызвано контекстное меню. Может быть none, image, audio, video, canvas, file или plugin.
- hasImageContents логическое значение - Указывает, вызвано ли контекстное меню на изображении, которое имеет непустое содержимое.
- isEditable логическое значение - Указывает, является ли контекст редактируемым.
- selectionText строка - Текст выделения, на котором было вызвано контекстное меню.
- titleText строка - Текст заголовка выделения, на котором было вызвано контекстное меню.
- altText строка - Текст alt выделения, на котором было вызвано контекстное меню.
- suggestedFilename строка - Предлагаемое имя файла для сохранения файла через опцию «Сохранить как» в контекстном меню.
- selectionRect Прямоугольник - Прямоугольник, представляющий координаты выделения в пространстве документа.
- selectionStartOffset число - Начальная позиция текста выделения.
- referrerPolicy Политика пересылки - Политика пересылки кадра, на котором вызвано меню.
- misspelledWord строка - Написанное неверно слово под курсором (при наличии).
- dictionarySuggestions строка[] - Массив предлагаемых слов, которые пользователь может использовать для замены misspelledWord. Доступно только при наличии неверно написанного слова и включенной проверки правописания.
- frameCharset строка - Кодировка символов кадра, на котором было вызвано меню.
- inputFieldType строка - Если контекстное меню было вызвано на поле ввода, тип этого поля. Возможные значения: none, plainText, password, other.
- spellcheckEnabled логическое значение - Если контекст редактируемый, включена ли проверка правописания.
- menuSourceType строка - Источник ввода, который вызвал контекстное меню. Может быть none, mouse, keyboard, touch, touchMenu, longPress, longTap, touchHandle, stylus, adjustSelection или adjustSelectionReset.
- mediaFlags Объект - Флаги для элемента медиа, на котором было вызвано контекстное меню.
  - inError логическое значение - Завис ли элемент медиа.
  - isPaused логическое значение - Приостановлен ли элемент медиа.
  - isMuted логическое значение - Выключен ли звук элемента медиа.
  - hasAudio логическое значение - Есть ли звук в элементе медиа.
  - isLooping логическое значение - Циклическое воспроизведение элемента медиа.
  - isControlsVisible логическое значение - Отображаются ли элементы управления элементом медиа.
  - canToggleControls логическое значение - Могут ли элементы управления элементом медиа переключаться.
  - canPrint логическое значение - Может ли элемент медиа быть распечатан.
  - canSave логическое значение - Может ли элемент медиа быть загружен.
  - canShowPictureInPicture логическое значение - Может ли элемент медиа показывать видео в виде миниатюры.
  - isShowingPictureInPicture логическое значение - В настоящее время отображается ли видео в виде миниатюры.
  - canRotate логическое значение - Может ли элемент медиа быть повернут.
  - canLoop логическое значение - Может ли элемент медиа быть воспроизведён циклически.
- editFlags Объект - Эти флаги показывают, считает ли рендерер, что может выполнить соответствующее действие.
  - canUndo логическое значение - Может ли рендерер отменить действие.
  - canRedo логическое значение - Может ли рендерер повторить действие.
  - canCut логическое значение - Может ли рендерер вырезать.
  - canCopy логическое значение - Может ли рендерер скопировать.
  - canPaste логическое значение - Может ли рендерер вставить.
  - canDelete логическое значение - Может ли рендерер удалить.
  - canSelectAll логическое значение - Может ли рендерер выбрать всё.
  - canEditRichly логическое значение - Может ли рендерер редактировать текст форматированно.

Вызывается при появлении нового контекстного меню, которое нужно обработать.

<webview> тэг

Предупреждение​

Включение​

Обзор​

Пример​

Внутренняя реализация​

Примечания по стилизации CSS​

Атрибуты тега​

src​

nodeintegration​

nodeintegrationinsubframes​

plugins​

preload​

httpreferrer​

useragent​

disablewebsecurity​

partition​

allowpopups​

webpreferences​

enableblinkfeatures​

disableblinkfeatures​

Методы​

<webview>.loadURL(url[, options])​

<webview>.downloadURL(url)​

<webview>.getURL()​

<webview>.getTitle()​

<webview>.isLoading()​

<webview>.isLoadingMainFrame()​

<webview>.isWaitingForResponse()​

<webview>.stop()​

<webview>.reload()​

<webview>.reloadIgnoringCache()​

<webview>.canGoBack()​

<webview>.canGoForward()​

<webview>.canGoToOffset(offset)​

<webview>.clearHistory()​

<webview>.goBack()​

<webview>.goForward()​

<webview>.goToIndex(index)​

<webview>.goToOffset(offset)​

<webview>.isCrashed()​

<webview>.setUserAgent(userAgent)​

<webview>.getUserAgent()​

<webview>.insertCSS(css)​

<webview>.removeInsertedCSS(key)​

<webview>.executeJavaScript(code[, userGesture])​

<webview>.openDevTools()​

<webview>.closeDevTools()​

<webview>.isDevToolsOpened()​

<webview>.isDevToolsFocused()​

<webview>.inspectElement(x, y)​

<webview>.inspectSharedWorker()​

<webview>.inspectServiceWorker()​

<webview>.setAudioMuted(muted)​

<webview>.isAudioMuted()​

<webview>.isCurrentlyAudible()​

<webview>.undo()​

<webview>.redo()​

<webview>.cut()​

<webview>.copy()​

<webview>.paste()​

<webview>.pasteAndMatchStyle()​

<webview>.delete()​

<webview>.selectAll()​

<webview>.unselect()​

<webview>.replace(text)​

<webview>.replaceMisspelling(text)​

<webview>.insertText(text)​

<webview>.findInPage(text[, options])​

<webview>.stopFindInPage(action)​

<webview>.print([options])​

<webview>.printToPDF(options)​

<webview>.capturePage([rect])​

<webview>.send(channel, ...args)​

<webview>.sendToFrame(frameId, channel, ...args)​

<webview>.sendInputEvent(event)​

<webview>.setZoomFactor(factor)​

<webview>.setZoomLevel(level)​

<webview>.getZoomFactor()​

<webview>.getZoomLevel()​

`<webview>` тэг

Предупреждение

Включение

Обзор

Пример

Внутренняя реализация

Примечания по стилизации CSS

Атрибуты тега

`src`

`nodeintegration`

`nodeintegrationinsubframes`

`plugins`

`preload`

`httpreferrer`

`useragent`

`disablewebsecurity`

`partition`

`allowpopups`

`webpreferences`

`enableblinkfeatures`

`disableblinkfeatures`

Методы

`<webview>.loadURL(url[, options])`

`<webview>.downloadURL(url)`

`<webview>.getURL()`

`<webview>.getTitle()`

`<webview>.isLoading()`

`<webview>.isLoadingMainFrame()`

`<webview>.isWaitingForResponse()`

`<webview>.stop()`

`<webview>.reload()`

`<webview>.reloadIgnoringCache()`

`<webview>.canGoBack()`

`<webview>.canGoForward()`

`<webview>.canGoToOffset(offset)`

`<webview>.clearHistory()`

`<webview>.goBack()`

`<webview>.goForward()`

`<webview>.goToIndex(index)`

`<webview>.goToOffset(offset)`

`<webview>.isCrashed()`

`<webview>.setUserAgent(userAgent)`

`<webview>.getUserAgent()`

`<webview>.insertCSS(css)`

`<webview>.removeInsertedCSS(key)`

`<webview>.executeJavaScript(code[, userGesture])`

`<webview>.openDevTools()`

`<webview>.closeDevTools()`

`<webview>.isDevToolsOpened()`

`<webview>.isDevToolsFocused()`

`<webview>.inspectElement(x, y)`

`<webview>.inspectSharedWorker()`

`<webview>.inspectServiceWorker()`

`<webview>.setAudioMuted(muted)`

`<webview>.isAudioMuted()`

`<webview>.isCurrentlyAudible()`

`<webview>.undo()`

`<webview>.redo()`

`<webview>.cut()`

`<webview>.copy()`

`<webview>.paste()`

`<webview>.pasteAndMatchStyle()`

`<webview>.delete()`

`<webview>.selectAll()`

`<webview>.unselect()`

`<webview>.replace(text)`

`<webview>.replaceMisspelling(text)`

`<webview>.insertText(text)`

`<webview>.findInPage(text[, options])`

`<webview>.stopFindInPage(action)`

`<webview>.print([options])`

`<webview>.printToPDF(options)`

`<webview>.capturePage([rect])`

`<webview>.send(channel, ...args)`

`<webview>.sendToFrame(frameId, channel, ...args)`

`<webview>.sendInputEvent(event)`

`<webview>.setZoomFactor(factor)`

`<webview>.setZoomLevel(level)`

`<webview>.getZoomFactor()`

`<webview>.getZoomLevel()`