BrowserWindow
文档地址:https://www.electronjs.org/docs/api/browser-window#使用ready-to-show事件
创建和控制浏览器窗口。
进程:主进程
// 在主进程中.
const { BrowserWindow } = require('electron')
// 或者从渲染进程中使用 `remote`.
// const { BrowserWindow } = require('electron').remote
let win = new BrowserWindow({
width: 800,
height: 600,
})
win.on('closed', () => {
win = null
})
// 加载远程URL
win.loadURL('https://github.com')
// 或加载本地HTML文件
win.loadURL(`file://${__dirname}/app/index.html`)
无边框窗口 frame:false
无边框窗口是不带外壳(包括窗口边框、工具栏等),只含有网页内容的窗口。 这些是 BrowserWindow 类上的选项。
详细内容请看文档
https://www.electronjs.org/docs/api/frameless-window
let win = new BrowserWindow({
width: 800,
height: 600,
frame:false,//无边框
})
优雅地显示窗口
当页面在窗口中直接加载时,用户会看到未完成的页面,这不是一个好的原生应用的体验。为了让画面显示时没有视觉闪烁,有两种不同的解决方案。
使用ready-to-show事件
在加载页面时,渲染进程第一次完成绘制时,如果窗口还没有被显示,渲染进程会发出 ready-to-show
事件 。 在此事件后显示窗口将没有视觉闪烁:
const { BrowserWindow } = require('electron')
let win = new BrowserWindow({ show: false })
win.once('ready-to-show', () => {
win.show()
})
这个事件通常在 did-finish-load
事件之后发出,但是页面有许多远程资源时,它可能会在 did-finish-load
之前发出事件。
Please note that using this event implies that the renderer will be considered "visible" and paint even though show
is false. 如果您使用 paintWhenInitiallyHidden: false
,此事件将永远不会被触发。
设置 backgroundColor
对于一个复杂的应用,ready-to-show
可能发出的太晚,会让应用感觉缓慢。 在这种情况下,建议立刻显示窗口,并使用接近应用程序背景的 backgroundColor
const { BrowserWindow } = require('electron')
let win = new BrowserWindow({ backgroundColor: '#2e2c29' })
win.loadURL('https://github.com')
父子窗口
通过使用 parent
选项,你可以创建子窗口:
const { BrowserWindow } = require('electron')
let top = new BrowserWindow()
let child = new BrowserWindow({ parent: top })
child.show()
top.show()
child
窗口将总是显示在 top
窗口的顶部.
模态窗口
模态窗口是禁用父窗口的子窗口,创建模态窗口必须设置 parent
和 modal
选项:
const { BrowserWindow } = require('electron')
let child = new BrowserWindow({ parent: top, modal: true, show: false })
child.loadURL('https://github.com')
child.once('ready-to-show', () => {
child.show()
})