第一步

新建demo2.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 = "btn2">打开新的窗口</button>
    <script src="render/demo2.js"></script>
</body>
</html>
第二步

新建demo2.js

const btn = this.document.querySelector('#btn2')

const { BrowserWindow } = require('@electron/remote')

window.onload = function(){
    btn.onclick = () => {
        newWin = new BrowserWindow({
            width:500,
            height:500,
            webPreferences:{
                // 开启node
                nodeIntegration: true,
                contextIsolation: false
            }
        })
        newWin.loadFile('yellow.html')
        newWin.on('closed',()=>{
            newWin = null
        })
    }
}
第三步

新建yellow.html

<!DOCTYPE html>
<html lang="en" style="background-color: yellow;">
<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>Yellow</title>
</head>
<body>
    <h1>我是一个黄色页面!</h1>
</body>
</html>
第四步

修改 main.js

var electron = require('electron')

var app = electron.app

var BrowserWindow = electron.BrowserWindow

var mainWindow = null

app.on('ready',()=>{
    mainWindow = new BrowserWindow({
        width:800,
        height:800,
        webPreferences: {
            nodeIntegration: true, //设置开启nodejs环境
            contextIsolation: false,
        }
    })
    require('@electron/remote/main').initialize()
    require('@electron/remote/main').enable(mainWindow.webContents)
    mainWindow.loadFile('demo2.html')
    mainWindow.on('closed',()=>{
        mainWindow = null
    })
})
第五步

执行以下命令

npm install --save @electron/remote
第六步

测试


问题

electron15 中无法使用 remote 的解决办法

# 先安装 @electron/remote 包
npm install --save @electron/remote

# 主进程 js 文件中
app.on('ready',function(){
//....
+ require('@electron/remote/main').initialize() // 初始化
+ require('@electron/remote/main').enable(mainWindow.webContents)
mainWindow.loadFile('./index.html') // 加载 html 页面
})

# 渲染进程 js 文件中
+ const { BrowserWindow } = require('@electron/remote') //引入 remote
红色为本次新增或修改的内容