electron版本：v18.1.0
一、安装依赖
npm install --save @electron/remote
二、主进程初始化remote
var electron = require('electron') //引入electron组件 var app = electron.app //引入组件app var BrowserWindow = electron.BrowserWindow //窗口引用 var mainWindow = null //申明打开窗口 app.on('ready', () => { //app初始化参数 mainWindow = new BrowserWindow({ windth: 800, height: 800, webPreferences: { nodeIntegration: true, //使用node功能 contextIsolation: false, enableRemoteModule: true } }) require('@electron/remote/main').initialize() require("@electron/remote/main").enable(mainWindow.webContents) mainWindow.loadFile('index.html') //打开窗口加载的页面 mainWindow.on('close', () => { //窗口关闭时，释放页面 mainWindow = null }) })
三、渲染进程中引入@electron/remote
const {BrowserWindow}=require('@electron/remote')
四、完整代码
main.js
var electron = require('electron') //引入electron组件 var app = electron.app //引入组件app var BrowserWindow = electron.BrowserWindow //窗口引用 var mainWindow = null //申明打开窗口 app.on('ready', () => { //app初始化参数 mainWindow = new BrowserWindow({ windth: 800, height: 800, webPreferences: { nodeIntegration: true, //使用node功能 contextIsolation: false, enableRemoteModule: true } }) require('@electron/remote/main').initialize() require("@electron/remote/main").enable(mainWindow.webContents) mainWindow.loadFile('index.html') //打开窗口加载的页面 mainWindow.on('close', () => { //窗口关闭时，释放页面 mainWindow = null }) })
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn">打开的新窗口</button> <script src="./render/index.js"></script> </body> </html>
render/index.js
const btn = this.document.querySelector('#btn') const {BrowserWindow}=require('@electron/remote') window.onload = function () { btn.onclick = () => { newWin = new BrowserWindow({ width: 500, hieght: 500 }) newWin.loadFile('new.html') newWin.on('closed', () => { newWin = null }) } }
new.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>new html</title> </head> <body> new html </body> </html>
五、运行效果
electron .
