electron 预加载页面
时间: 2023-08-02 07:07:26 浏览: 62
Electron 中可以使用预加载脚本来在渲染进程运行之前执行一些操作,例如加载某些模块或设置全局变量。预加载脚本的代码可以在主进程中执行,也可以在单独的 JS 文件中编写,然后在 `BrowserWindow` 中指定。
以下是一个使用预加载脚本的例子:
在主进程中:
```javascript
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js') // 指定预加载脚本
}
})
// 加载应用程序主页面
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
```
在 `BrowserWindow` 的 `webPreferences` 中指定了预加载脚本的路径,它会在渲染进程运行之前加载并执行。在本例中,预加载脚本为 `preload.js`。
在 `preload.js` 文件中,可以编写一些代码来执行一些操作。例如,可以在其中加载 Node.js 模块或设置全局变量。以下是一个简单的例子:
```javascript
const { remote } = require('electron')
window.addEventListener('DOMContentLoaded', () => {
const currentWindow = remote.getCurrentWindow()
currentWindow.setTitle('My App') // 设置窗口标题
})
```
在本例中,我们使用 `remote` 模块获取当前窗口,并设置窗口标题为 "My App"。
需要注意的是,预加载脚本中的代码可以访问 Node.js 的 API,但不能访问渲染进程的 DOM。如果需要与渲染进程进行通信,可以使用 Electron 的 IPC 功能。