跳到主要内容

预加载脚本

注意，预加载脚本默认情况下，只提供了部分能使用electron的api、部分node模块

可以设置sandbox为false、或者设置nodeIntegration为true, 就能使用electron和node其他模块了

由于Electron主进程可以完全操作系统的权限，为了避免渲染进程直接调用主进程的方法带来的安全问题，因此有了预加载脚本

预加载脚本可以理解为桥梁，是主进程和渲染进程的之间访问桥梁
通过预加载脚本，去访问主进程，把渲染页面的参数结果传递给渲染进程，在进行渲染页面
- 虽然在预加载脚本可以访问DOM, 可以进行操作DOM, 渲染页面，但是不建议
  - 各司其职，操作DOM和渲染页面的操作，放在渲染进程去处理
避免在渲染进程直接使用nodejs模块和electron模块可能带来的安全风险
预加载脚本提供了一种在渲染进程中安全地访问 Node.js 模块和 Electron API 的机制

预加载脚本何时注入？

预加载脚本在渲染进程加载网页之前注入

使用场景

提供全局变量或函数：预加载脚本可以在渲染进程中提供一些全局变量或函数，供你的应用程序中的所有渲染进程共享使用
访问底层系统功能：预加载脚本可以使用 Node.js 模块和 Electron API 来访问底层系统功能，比如读取文件、执行 Shell 命令、操作系统原生通知等
加强安全性：通过预加载脚本，你可以将某些敏感的 Electron API 功能封装在主进程中，并只将必要的功能暴露给渲染进程
主进程和渲染进程通信，配合contextBridge

使用

主进程中在webPreferences中的preload属性

javascript
 webPreferences: {
      preload: path.join(__dirname, 'preload.js')
}

preload.js

javascript
const fs = require('fs');

// 访问node模块
const content = fs.readFileSync('package.json', 'utf-8');
console.log('content', content);

// 不建议DOM操作在预加载脚本处理，此代码最好放在渲染进程中处理DOM相关，DOM相关放在渲染进程中 【应各司其职】
window.addEventListener('DOMContentLoaded', () => {
  console.log('DOM加载完');
  // 可访问dom, 一般在渲染进程中访问dom,不建议在预加载脚本访问
});

预加载脚本何时注入？
使用场景
使用