Electron 如何在渲染进程中去创建新弹窗

在Electron中要想在渲染进程中弹出新窗体，一般有以下两种方式

• 引入remote模块，在页面中使用remote中的BrowserWindow对象来创建窗体
• 使用渲染进程和主线程的通信，利用渲染进程发信给主线程，统一由主线程来创建新窗体

实现过程

remote模块创建窗体

安装@electron/remote模块

npm i -D @electron/remote

主进程

@electron/remote/main 必须在主进程中初始化，然后才能从渲染进程中使用它

require('@electron/remote/main').initialize()

在中electron >= 14.0.0，您必须使用新的enableAPI来分别启用每个所需的远程模块WebContents

const { app } = require("electron");
const mainWin = new BrowserWindow({
   ...,
   webPreferences: {
   	 nodeIntegration: true, //允许渲染进程内启用Node集成
     contextIsolation: false, //是否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本. 默认为 true
   },
 });
app.on('browser-window-created', (_, window) => {
    require("@electron/remote/main").enable(window.webContents)
})

在electron < 14.0.0 中，@electron/remote尊重enableRemoteModuleWebPreferences 值。您必须传递{ webPreferences: { enableRemoteModule: true } }给窗体的构造函数，BrowserWindow该构造函数应授予@electron/remote使用权限

const { BrowserWindow } = require("electron");
const mainWin = new BrowserWindow({
   ...,
   webPreferences: {
   	 nodeIntegration: true, //允许渲染进程内启用Node集成
     contextIsolation: false, //是否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本. 默认为 true
     enableRemoteModule: true
   },
 });

渲染进程

调用@electron/remote创建新窗体 同步方式

const { BrowserWindow } = require("@electron/remote");
let win = new BrowserWindow({width:800,height:600})
win.loadURL('https://wwww.baidu.com');

主进程和渲染进程通信创建窗体

渲染进程

const { ipcRenderer } = require("electron");
ipcRenderer.send("openWindow");

主进程

const { ipcMain, BrowserWindow } = require("electron");
ipcMain.on('openWindow',(ev,target)=>{
  const newWin = new BrowserWindow({
    width: 600,
    height: 400,
  });
  newWin.loadURL('https://wwww.baidu.com');
})

注意

1. 上面的例子中是通过{ webPreferences: { nodeIntegration: true ,contextIsolation: false} }给窗体的构造函数来解决渲染进程不能引入node和Electron模块的问题,不过这样子会有安全风险 ，一般来说可以用webPreferences 中 preload来暴露node和Electron的Api
2. @electron/remote由于这需要通过 npm 的模块而不是内置模块，因此如果您remote从渲染进程中使用，则需要适当配置捆绑器以打包@electron/remote 预加载脚本中的代码。当然，使用@electron/remote会让沙盒的效率大大降低。在@electron/remotenpm官网^1^中也明确说明不推荐使用该模块

Footnotes

1. @electron/remotenpm官网 ↩