窗口篇
作者:Kurosaki
本文主要讲解Electron
窗口的 API
和一些在开发之中遇到的问题。
官方文档 虽然比较全面,但是要想开发一个商用级别的桌面应用必须对整个 Electron API
有较深的了解,才能应对各种需求。
1. 创建窗口
通过BrowserWindow
,来 创建 或者 管理 新的浏览器窗口,每个浏览器窗口都有一个进程来管理。
1.1. 简单创建窗口
const {
BrowserWindow } = require('electron');
const win = new BrowserWindow();
win.loadURL('https://github.com');
效果如下:
1.1.2. 优化
问题:electron
的 BrowserWindow
模块在创建时,如果没有配置 show:false
,在创建之时就会显示出来,且默认的背景是白色;然后窗口请求 HTML
,会出现视觉闪烁。
解决
const {
BrowserWindow } = require('electron');
const win = new BrowserWindow({
show:false });
win.loadURL('https://github.com');
win.on('ready-to-show',()=>{
win.show();
})
两者对比有很大的区别
1.2. 管理窗口
所谓的管理窗口,相当于主进程可以干预窗口多少。
- 窗口的路由跳转
- 窗口打开新的窗口
- 窗口大小、位置等
- 窗口的显示
- 窗口类型(无边框窗口、父子窗口)
- 窗口内
JavaScript
的node
权限,预加载脚本等 - …
这些个方法都存在于BrowserWindow
模块中。
1.2.1. 管理应用创建的窗口
BrowserWindow
模块在创建窗口时,会返回 窗口实例,这些 **窗口实例 **上有许多功能方法,我们利用这些方法,管理控制这个窗口。
在这里使用Map
对象来存储这些 窗口实例。
const BrowserWindowsMap = new Map<number, BrowserWindow>()
let mainWindowId: number;
const browserWindows = new BrowserWindow({
show:false })
browserWindows.loadURL('https://github.com')
browserWindows.once('ready-to-show', () => {
browserWindows.show()
})
BrowserWindowsMap.set(browserWindow.id, browserWindow)
mainWindowId = browserWindow.id // 记录当前窗口为主窗口
窗口被关闭,得把Map
中的实例删除。
browserWindow.on('closed', () => {
BrowserWindowsMap?.delete(browserWindowID)
})
1.2.2. 管理用户创建的窗口
主进程可以控制窗口许多行为,这些行为会在后续文章一一列举;以下以主进程控制窗口建立新窗口的行为为例。
使用new-window
监听新窗口创建
// 创建窗口监听
browserWindow.webContents.on('new-window', (event, url, frameName, disposition) => {
/** @params {string} disposition
* new-window : window.open调用
* background-tab: command+click
* foreground-tab: 右键点击新标签打开或点击a标签target _blank打开
* /
})
注:关于
disposition
字段的解释,移步electron文档、electron源码、chrome 源码
扩展new-window
经过实验,并不是所有新窗口的建立,
new-window
都能捕捉到的。
以下方式打开的窗口可以被new-window
事件捕捉到
window.open('https://github.com')
<a href='https://github.com' target='__blank'>链接</a>
**
渲染进程中使用BrowserWindow
创建新窗口,不会被 new-window
事件捕捉到
**
const {
BrowserWindow } = require('electron').remote
const win = new BrowserWindow()
win.loadURL('https://github.com')
_渲染进程访问 __remote_
_,主进程需配置enableRemoteModule:true _
使用这种方式同样可以打开一个新的窗口,但是主进程的new-window捕捉不到。
应用new-window
new-window
控制着窗口新窗口的创建,我们利用这点,可以做到很多事情;比如链接校验、浏览器打开链接等等。默认浏览器打开链接代码如下:
import {
shell } from 'electron'
function openExternal(url: string) {
const HTTP_REGEXP = /^https?:\/\//
// 非http协议不打开,防止出现自定义协议等导致的安全问题
if (!HTTP_REGEXP) {
return false
}
try {
await shell.openExternal(url, options)
return true
} catch (error) {
console.error('open external error: ', error)
return false
}
}
// 创建窗口监听
browserWindow.webContents.on('new-window', (event, url, frameName, disposition) => {
if (disposition === 'foreground-tab') {
// 阻止鼠标点击链接
event.preventDefault()
openExternal(url)
}
})
_关于 __shell_
模块,可以查看官网 https://www.electronjs.org/docs/api/shell
_
1.3. 关闭窗口
**close**
**事件和 ****closed**
事件
close
事件在窗口将要关闭时之前触发,但是在 DOM
的 beforeunload
和 unload
事件之前触发。
// 窗口注册close事件
win.on('close',(event)=>{
event.preventDefault() // 阻止窗口关闭
})
closed
事件在窗口关闭后出触发,但是此时的窗口已经被关闭了,无法通过 event.preventDefault()
来阻止窗口关闭。
win.on