Создать окно позволяет класс BrowserWindow
из пакета electron
. Формат конструктора:
<Объект окна> = new BrowserWindow(<Объект с опциями>)
Обратите внимание: окно можно создать только в процессе Main.
В параметре <Объект с опциями>
можно указать следующие опции:
title
— заголовок окна по умолчанию. Если в HTML-документе имеется тег <title>
, то будет использоваться его значение. Если тег и опция не заданы, то берется значение свойства name
из файла package.json
. После создания окна можно воспользоваться методами setTitle(<Заголовок>)
и getTitle()
;show
— если опция имеет значение true
(значение по умолчанию), то после создания окно будет отображено на экране;type
— задает тип окна;alwaysOnTop
— если опция имеет значение true
, то окно будет всегда отображаться поверх других окон (значение по умолчанию: false
);skipTaskbar
— если опция имеет значение true
, то значок окна не будет отображаться на Панели задач (значение по умолчанию: false
);focusable
— если опция имеет значение false
, то окно не сможет получать фокус ввода (значение по умолчанию: true
);autoHideMenuBar
— если опция имеет значение true
, то строка меню будет по умолчанию скрываться и отображаться только при нажатии клавиши <Alt> (значение по умолчанию: false
).Управлять отображением и сокрытием окна позволяют следующие методы:
show()
— отображает окно и устанавливает на него фокус ввода;showInactive()
— отображает окно, но не устанавливает на него фокус ввода;hide()
— скрывает окно;focus()
— устанавливает на окно фокус ввода;blur()
— убирает с окна фокус ввода;isFocused()
— возвращает true
, если окно находится в фокусе ввода, и false
— в противном случае;isVisible()
— возвращает true
, если пользователь видит окно, и false
— в противном случае;isAlwaysOnTop()
— возвращает true
, если окно всегда отображается поверх других окон, и false
— в противном случае;moveTop()
— отображает окно поверх других окон.Загрузить Web-страницу в окно позволяют следующие методы:
loadFile(<Путь>[, <Объект с опциями>])
— загружает локальный файл. Возвращает объект Promise
, который успешно разрешается при удачной загрузке. Пример:win.loadFile('index.htm').then(() => {
console.log('loadFile OK');
}).catch((e) => {
console.log(e);
});
loadURL(<URL>[, <Объект с опциями>])
— загружает HTML-документ по указанному URL. Во втором параметре указывается объект с опциями userAgent
, httpReferrer
, extraHeaders
, postData
и baseURLForDataURL
. Возвращает объект Promise
, который успешно разрешается при удачной загрузке. Пример загрузки локального файла:let url = require('url').format({
protocol: 'file',
slashes: true,
pathname: require('path').join(__dirname, 'index.html')
});
win.loadURL(url).then(() => {
console.log('loadURL OK');
}).catch((e) => {
console.log(e);
});
Перечислим основные события:
show
— отображение окна;hide
— сокрытие окна;ready-to-show
— Web-страница загружена и может быть показана без мерцания;page-title-updated
— генерируется при смене заголовка окна. Если вызвать метод preventDefault()
через объект события, то заголовок изменен не будет:win.on('page-title-updated', (e, title, exp) => {
e.preventDefault();
});
focus
— окно получило фокус ввода;blur
— окно потеряло фокус ввода.Отобразим окно внутри обработчика события ready-to-show
:
let win = new BrowserWindow({
title: 'Заголовок окна',
show: false
});
win.on('ready-to-show', () => {
win.show();
});
win.loadFile('index.html');
Получить ссылки на окна позволяют следующие статические методы из класса BrowserWindow
:
getAllWindows()
— возвращает массив со всеми открытыми окнами. Пример:app.on('activate', () => { // Для MacOS
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
getFocusedWindow()
— возвращает ссылку на окно, находящееся в фокусе ввода или значение null
;fromWebContents(<webContents>)
— возвращает ссылку на окно, соответствующее объекту webContents
, или значение null
:
console.log(BrowserWindow.fromWebContents(win.webContents));
fromId(<id>)
— возвращает ссылку на окно, соответствующее идентификатору <id>
, или значение null
:
console.log(BrowserWindow.fromId(win.id));