Electron 预加载脚本

Electron 的主进程是一个具有完整操作系统访问权限的 Node.js 环境。除了 Electron 模块外，您还可以访问 Node.js 内置模块以及通过 npm 安装的任何包。另一方面，渲染进程运行网页，出于安全考虑默认不运行 Node.js。

为了连接 Electron 的不同进程类型，我们需要使用一种称为 preload 的特殊脚本。

编辑预加载脚本，在其中指定需要暴露给渲染进程的信息：

preload.js:

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron
})

创建窗口时指定预加载脚本：

main.js:

const { app, BrowserWindow } = require('electron')
const path = require('node:path')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')  // 指定预加载脚本
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

使用渲染进程访问预加载脚本暴露的信息：

renderer.js:

const information = document.getElementById('info')
information.innerText = `This app is using Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), and Electron (v${versions.electron()})`

用于显示结果的 HTML 文档：

main.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
    <p id="info"></p>
  </body>
  <script src="./renderer.js"></script>
</html>

参考：Using Preload Scripts | Electron

posted @ 2025-06-28 01:51 Undefined443 阅读(36) 评论(0) 收藏举报

刷新页面返回顶部

undefined443

Electron 预加载脚本

公告