Создавайте окна браузера и управляйте ими.
Процесс: Главный
Этот модуль нельзя использовать д о тех пор, пока событие ready
в app
не будет готово к использованию.
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600 })
win.loadURL('https://github.com')
win.loadFile('index.html')
Настройки окна
Класс BrowserWindow
раскрывает различные способы изменения внешнего вида и поведения окон вашего приложения. В руководстве Настройки окон содержится детальная информация.
Showing the window gracefully
When loading a page in the window directly, users may see the page load incrementally, which is not a good experience for a native app. To make the window display without a visual flash, there are two solutions for different situations.
Использование события ready-to-show
При загрузке страницы, после отрисовки страницы будет происходить событие ready-to-show
, которое будет происходить первый раз, если окно до этого еще не было показано. Окно, показанное после этого события, не будет иметь визуальной ступенчатой подгрузки:
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ show: false })
win.once('ready-to-show', () => {
win.show()
})
Обычно это событие происходит после события did-finish-load
. Однако, страницы, включающие в себя удаленные ресурсы, могут продолжать подгружаться после происхождения события did-finish-load
.
Пожалуйста, обратите внимание, что использование этого события означает, что рендерер будет считаться "видимым" и отрисуется, даже если show
является false. Это событие никогда не сработает, если вы используете paintWhenInitiallyHidden: false
Указание значения свойства backgroundColor
Для больших приложений событие ready-to-show
может вызываться слишком поздно, что может замедлить приложение. В этом случае рекомендуется показать окно немедленно, и использовать backgroundColor
, задающий цвет фона Вашего приложения:
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ backgroundColor: '#2e2c29' })
win.loadURL('https://github.com')
Обратите внимание, что даже для приложений, использующих ready-to-show
события, всё равно рекомендуется установить backgroundColor
, чтобы придать приложению более естественный вид.
Приведем несколько примеров возможных значений backgroundColor
:
const win = new BrowserWindow()
win.setBackgroundColor('hsl(230, 100%, 50%)')
win.setBackgroundColor('rgb(255, 145, 145)')
win.setBackgroundColor('#ff00a3')
win.setBackgroundColor('blueviolet')
Дополнительную информацию о типах цветов смотрите в разделе примеров допустимых значений win.setBackgroundColor.
Родительские и дочерние окна
С помощью параметра parent
, Вы можете создавать дочерние окна:
const { BrowserWindow } = require('electron')
const top = new BrowserWindow()
const child = new BrowserWindow({ parent: top })
child.show()
top.show()
Окно child
будет всегда показано поверх окна top
.
Модальные окна
A modal window is a child window that disables parent window. To create a modal window, you have to set both the parent
and modal
options:
const { BrowserWindow } = require('electron')
const top = new BrowserWindow()
const child = new BrowserWindow({ parent: top, modal: true, show: false })
child.loadURL('https://github.com')
child.once('ready-to-show', () => {
child.show()
})
Видимость страниц
API видимости страниц работает следующим образом:
- На всех платформах состояние видимости отслеживает скрыто/уменьшено окно или нет.
- Кроме того, на macOS, состояние видимости также отслеживает состояние перекрытия окна. Если окно перекрыто (т.е. полностью покрыто) другим окном, состояние видимости будет
hidden
. На других платформах состояние видимости будет hidden
, только когда окно уменьшено или явно скрыто при помощи win.hide()
.
- Если
BrowserWindow
создано с show: false
, первоначальное состояние видимости будет visible
, несмотря на фактически скрытое окно.
- Если
backgroundThrottling
отключено, состояние видимости останется visible
, даже если окно уменьшено, закрыто или скрыто.
Рекомендуется приостановить дорогостоящие операции, когда состояние видимости hidden
, для того чтобы свести к минимуму потребление энергии.
Платформа заметок
- На macOS модальные окна будут отображены в виде страниц, прикрепленных к родительскому окну.
- На macOS дочерние окна будут находиться относительно родительского окна, во время передвижения родительского окна, тем временем на Windows и Linux дочерние окна не будут двигаться.
- На Linux тип модального окна будет поменян в
dialog
.
- На Linux многие среды рабочего стола не поддерживают скрытие модального окна.
Class: BrowserWindow extends BaseWindow
Создавайте окна браузера и управляйте ими.
Процесс: Главный
BrowserWindow
является EventEmitter.
Так создается новый экземпляр BrowserWindow
с нативными свойствами, установленными в options
.
new BrowserWindow([options])
options
BrowserWindowConstructorOptions (optional)
webPreferences
WebPreferences (optional) - Settings of web page's features.
devTools
boolean (опционально) - включает инструменты разработчика. Если значение false
, нельзя будет использовать BrowserWindow.webContents.openDevTools()
, чтобы открыть инструменты разработчика. По умолчанию - true
.
nodeIntegration
boolean (optional) - Whether node integration is enabled. По умолчанию - false
.
nodeIntegrationInWorker
boolean (опционально) - включает интеграцию NodeJS в веб-воркерах. По умолчанию - false
. Больше об этом можно найти в многопоточности.
nodeIntegrationInSubFrames
boolean (опционально) - экспериментальная опция для включения поддержки NodeJS в подфреймах, таких как iframes и дочерних окнах. Все Ваши предварительные загрузки будут загружены для каждого iframe, Вы можете использовать process.isMainFrame
, чтобы определить в главно м фрейме Вы или нет.
preload
string (опционально) - Определяет скрипт, который будет загружен до других скриптов загружаемых в странице. Этот скрипт будет всегда иметь доступ к API NodeJS, вне зависимости включена или выключена интеграция NodeJS. Значение должно быть абсолютным путем к файлу скрипта. Когда интеграция NodeJS отключена, предварительно загруженный скрипт может повторно ввести глобальные символы NodeJS в глобальную область. Посмотреть пример здесь.
sandbox
boolean (опционально) - если установлено true, то в окне будет запущена песочница, что делает ее совместимой с песочницей Chromium на уровне операционной системы, и отключает движок NodeJS. Это не тоже самое, что параметр nodeIntegration
, доступные API для предзагруженных скриптов более ограничены. Узнать больше об этой опции можно здесь.
session
Session (опционально) - устанавливает сессию, которая используется страницей. Вместо передачи экземпляр Session напрямую, вместо этого Вы можете также выбрать использование опции partition
, которая принимает строку раздела. Когда оба session
и partition
определены, session
будет предпочтительней. По умолчанию используется сессия по умолчанию.
partition
string (опционально) - устанавливает сессию, используемую на странице в соответствии со строкой раздела сессии. Если partition
начинается с persist:
, страница будет использовать постоянную сессию, которая доступна всем страницам в приложении с тем же разделом
. Если нет префикса persist:
, страница будет использовать сессию в памяти. При присваивании одинакового раздела
, разные страницы могут иметь одинаковую сессию. По умолчанию используется сессия по умолчанию.
zoomFactor
number (optional) - The default zoom factor of the page, 3.0
represents 300%
. По умолчанию 1.0
.
javascript
boolean (optional) - Enables JavaScript support. По умолчанию - true
.
webSecurity
boolean (опционально) - Когда false
, отключается политика same-origin (обычно используется при тестировании вебсайтов людьми), и устанавливается allowRunningInsecureContent
в true
, если параметр не был установлен пользователем. По умолчанию - true
.
allowRunningInsecureContent
boolean (optional) - Allow an https page to run JavaScript, CSS or plugins from http URLs. По умолчанию - false
.
images
boolean (optional) - Enables image support. По умолчанию - true
.
imageAnimationPolicy
string (optional) - Specifies how to run image animations (E.g. GIFs). Can be animate
, animateOnce
or noAnimation
. По умолчанию animate
.
textAreasAreResizable
boolean (optional) - Make TextArea elements resizable. Default is true
.
webgl
boolean (optional) - Enables WebGL support. По умолчанию - true
.
plugins
boolean (optional) - Whether plugins should be enabled. По умолчанию - false
.
experimentalFeatures
boolean (optional) - Enables Chromium's experimental features. По умолчанию - false
.
scrollBounce
boolean (optional) macOS - Enables scroll bounce (rubber banding) effect on macOS. По умолчанию - false
.
enableBlinkFeatures
string (опционально) - список строк функций, разделенных запятой
, которые нужно включить, например CSSVariables,KeyboardEventKey
. The full list of supported feature strings can be found in the RuntimeEnabledFeatures.json5 file.
disableBlinkFeatures
string (опционально) - Список функциональных возможностей для выключения, разделяются ','
, например CSSVariables,KeyboardEventKey
. The full list of supported feature strings can be found in the RuntimeEnabledFeatures.json5 file.
defaultFontFamily
Object (optional) - Sets the default font for the font-family.
standard
string (опционально) - По умолчанию Times New Roman
.
serif
string (опционально) - по умолчанию Times New Roman
.
sansSerif
string (опционально) - По умолчанию Arial
.
monospace
string (опционально) - По умолчанию Courier New
.
cursive
string (опционально) - По умолчанию Script
.
fantasy
string (опционально) - По умолчанию Impact
.
math
string (опционально) - По умолчанию Latin Modern Math
.
defaultFontSize
Integer (опционально) - По умолчанию 16
.
defaultMonospaceFontSize
Integer (опционально) - По умолчанию 13
.
minimumFontSize
Integer (опционально) - По умолчанию 0
.
defaultEncoding
string (опционально) - По умолчанию ISO-8859-1
.
backgroundThrottling
boolean (опционально) - Отключать ли анимацию и таймеры, когда страница становится фоновой. Это также влияет на API видимости страницы. When at least one webContents displayed in a single browserWindow has disabled backgroundThrottling
then frames will be drawn and swapped for the whole window and other webContents displayed by it. По умолчанию true
.
offscreen
boolean (опционально) - Включает отрисовку окна браузера вне экрана. По умолчанию false
. Смотрите руководство отрисовки вне экрана для подробной информации.
contextIsolation
boolean (опционально) - Запускать или нет API Electron и определенный скрипт preload
в отдельном JavaScript-контексте. По умолчанию true
. The context that the preload
script runs in will only have access to its own dedicated document
and window
globals, as well as its own set of JavaScript builtins (Array
, Object
, JSON
, etc.), which are all invisible to the loaded content. The Electron API will only be available in the preload
script and not the loaded page. This option should be used when loading potentially untrusted remote content to ensure the loaded content cannot tamper with the preload
script and any Electron APIs being used. This option uses the same technique used by Chrome Content Scripts. You can access this context in the dev tools by selecting the 'Electron Isolated Context' entry in the combo box at the top of the Console tab.
webviewTag
boolean (опционально) - Включить ли <webview>
tag. По умолчанию false
. Примечание: Cкрипт preload
, настроенный для <webview>
, при запуске будет иметь интеграцию NodeJS, так что Вы должны убедиться, что удаленный/непроверенный контент не сможет создавать тег <webview>
с возможно вредоносным скриптом preload
. Вы можете использовать событие will-attach-webview
на webContents, чтобы отключить скрипт preload
и проверить или изменить начальные настройки <webview>
.
additionalArguments
string[] (optional) - A list of strings that will be appended to process.argv
in the renderer process of this app. Useful for passing small bits of data down to renderer process preload scripts.
safeDialogs
boolean (optional) - Whether to enable browser style consecutive dialog protection. По умолчанию - false
.
safeDialogsMessage
string (опционально) - Сообщение, которое будет отображено, когда сработает последовательная защита диалогов. Если не определено, будет использовано сообщение по умолчанию, обратите внимание, что текущее сообщение по умолчанию на английском и не переведено.
disableDialogs
boolean (optional) - Whether to disable dialogs completely. Overrides safeDialogs
. По умо лчанию - false
.
navigateOnDragDrop
boolean (optional) - Whether dragging and dropping a file or link onto the page causes a navigation. По умолчанию - false
.
autoplayPolicy
string (опционально) - политика автовоспроизведения для применения к содержимому в окне, может быть no-user-gesture-required
, user-gesture-required
или document-user-activation-required
. По умолчанию no-user-gesture-required
.
disableHtmlFullscreenWindowResize
boolean (optional) - Whether to prevent the window from resizing when entering HTML Fullscreen. Default is false
.
accessibleTitle
string (optional) - An alternative title string provided only to accessibility tools such as screen readers. This string is not directly visible to users.
spellcheck
boolean (optional) - Whether to enable the builtin spellchecker. По умолчанию - true
.
enableWebSQL
boolean (optional) - Whether to enable the WebSQL api. По умолчанию - true
.
v8CacheOptions
string (optional) - Enforces the v8 code caching policy used by blink. Accepted values are
none
- Disables code caching
code
- Heuristic based code caching
bypassHeatCheck
- Bypass code caching heuristics but with lazy compilation
bypassHeatCheckAndEagerCompile
- Same as above except compilation is eager. Default policy is code
.
enablePreferredSizeMode
boolean (optional) - Whether to enable preferred size mode. The preferred size is the minimum size needed to contain the layout of the document—without requiring scrolling. Enabling this will cause the preferred-size-changed
event to be emitted on the WebContents
when the preferred size changes. По умолчанию - false
.
transparent
boolean (optional) - Whether to enable background transparency for the guest page. По умолчанию - true
. Note: The guest page's text and background colors are derived from the color scheme of its root element. When transparency is enabled, the text color will still change accordingly but the background will remain transparent.
paintWhenInitiallyHidden
boolean (опционально) - Должен ли рендерер быть активным, когда show
равен false
и он только что создан. Для document.visibilityState
для корректной работы при первой загрузке с show: false
необходимо установить значение false
. Установка этого в false
приведёт к тому, что события ready-to-show
не будут запускаться. По умолчанию - true
.
События экземпляра
Объекты созданные с помощью new BrowserWindow
имеют следующие события:
Примечание: Некоторые методы доступны только в определенных операционных системах и помечены как таковые.
Событие: 'page-title-updated'
Возвращает:
- Событие типа
event
title
string
explicitSet
boolean
Происходит, когда документ меняет свой заголовок, вызов event.preventDefault()
предотвратит изменение заголовка нативного окна. explicitSet
является false, когда заголовок синтезирован из url файла.
Событие: 'close'
Возвращает:
Происходит при закрытии окна. Оно происходит перед событиями beforeunload
и unload
в DOM. Вызов event.preventDefault()
предотвратит закрытие.
Скорее всего, Вы захотите использовать обработчик beforeunload
, чтобы решить, когда окно должно быть закрыто, который также будет вызываться, когда окно перезаг ружается. В Electron возврат любого значения, отличного от undefined
, предотвратит закрытие. Например:
window.onbeforeunload = (e) => {
console.log('Я не хочу быть закрыт')
e.returnValue = false
}
Примечание: Существует тонкая разница между поведением window.onbeforeunload = handler
и window.addEventListener('beforeunload', handler)
. Рекомендуется всегда устанавливать event.returnValue
явно, вместо того, чтобы просто возвращать значение, поскольку первое работает более последовательно в Electron.
Событие: 'closed'
происходит когда окно приложения закрыто. After you have received this event you should remove the reference to the window and avoid using it any more.
Событие: 'session-end' Windows
Происходит, когда сеанс окна заканчивается из-за выключения, перезагрузки компьютера или отключения сеанса.
Событие: 'unresponsive'
Вызывается, когда страница "не отвечает".
Событие: 'responsive'
Происходит, когда страница, которая "не отвечала", снова реагирует.
Событие: 'blur'
Происходит, когда окно теряет фокус.
Событие: 'focus'
Происходит, когда на окне фокусируются.
Событие: 'show'
Происходит, когда отображается окно.
Событие: 'hide'
Происходит, когда окно спрятано.
Событие: 'ready-to-show'
Происходит, когда веб-страница была отрисована (пока не отображена) и окно может быть отображено без визуального мерцания.
Пожалуйста, обратите внимание, что использование этого события означает, что рендерер будет считаться "видимым" и отрисуется, даже если show
является false. Это событие никогда не сработает, если вы используете paintWhenInitiallyHidden: false
Событие: 'maximize'
Происходит, когда окно увеличивается до предела.
Со бытие: 'unmaximize'
Происходит, когда окно выходит из увеличенного состояния.
Событие: 'minimize'
Происходит, когда окно было свернуто.
Событие: 'restore'
Происходит, когда окно восстанавливается из свернутого состояния.
Событие: 'will-resize' macOS Windows
Возвращает:
- Событие типа
event
newBounds
Rectangle - Размер окна, на который будет изменено.
- Объект
details
edge
(string) - The edge of the window being dragged for resizing. Can be bottom
, left
, right
, top-left
, top-right
, bottom-left
or bottom-right
.
Emitted before the window is resized. Calling event.preventDefault()
will prevent the window from being resized.
Note that this is only emitted when the window is being resized manually. Resizing the window with setBounds
/setSize
will not emit this event.
The possible values and behaviors of the edge
option are platform dependent. Возможные значения:
- On Windows, possible values are
bottom
, top
, left
, right
, top-left
, top-right
, bottom-left
, bottom-right
.
- On macOS, possible values are
bottom
and right
.
- The value
bottom
is used to denote vertical resizing.
- The value
right
is used to denote horizontal resizing.
Событие: 'resize'
Происходит после того, как изменился размер окна.
Event: 'resized' macOS Windows