Веб-вставки

Обзор​

Если вы хотите встроить (веб-контент сторонних разработчиков) в Electron BrowserWindow, у вас есть три варианта: теги <iframe>, теги <webview> и BrowserViews. Каждый из них предлагает немного разные функции и полезен в разных ситуациях. Чтобы помочь вам сделать выбор, в этом руководстве объясняются различия и возможности каждого варианта.

IFrames​

IFrames в Electron ведут себя как обычные IFrame в обычных браузерах. Элемент <iframe> на вашей странице может отображать внешние веб-страницы, при условии, что их Политика безопасности контента разрешает это. Чтобы ограничить возможности сайта в теге <iframe>, рекомендуется использовать атрибут sandbox и разрешать только необходимые возможности.

WebViews​

Важное примечание: мы не рекомендуем использовать WebViews, так как этот тег подвергается значительным изменениям архитектуры, которые могут повлиять на стабильность вашего приложения. Рассмотрите возможность перехода на альтернативы, такие как iframe и Electron's BrowserView, или архитектуру, которая по умолчанию избегает встраиваемого контента.

WebViews основаны на WebViews Chromium и не поддерживаются напрямую Electron. Мы не гарантируем, что API WebView будет доступен в будущих версиях Electron. Для использования тегов <webview>, вам необходимо установить webviewTag в значение true в webPreferences вашего BrowserWindow.

WebView — это пользовательский элемент (<webview>) который будет работать только внутри Electron. Они реализованы как «iframe вне процесса». Это означает, что все взаимодействие с <webview> осуществляется асинхронно с использованием IPC. Элемент <webview> имеет множество пользовательских методов и событий, аналогичных webContents, которые предоставляют вам больший контроль над содержимым.

По сравнению с <iframe>, <webview> обычно немного медленнее, но предоставляет гораздо больший контроль над загрузкой и взаимодействием с контентом сторонних разработчиков, а также обработкой различных событий.

BrowserViews​

BrowserViews не являются частью DOM — вместо этого они создаются и управляются вашим главным процессом. Они представляют собой просто ещё один слой веб-контента поверх вашего существующего окна. Это означает, что они полностью отделены от вашего собственного содержимого BrowserWindow и их положение не контролируется DOM или CSS. Вместо этого, оно контролируется настройкой границ в главном процессе.

BrowserViews обеспечивают наибольший контроль над их содержимым, поскольку они реализуют webContents аналогично тому, как это делает BrowserWindow. Однако, поскольку BrowserViews не являются частью вашего DOM, а накладываются поверх него, вам придется управлять их позицией вручную.