该项目的electron的版本为11.2.1
1.在根目录下index.html , 并引入新窗口的逻辑文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electron</title>
</head>
<body>
<h1>Electron自定义窗口</h1>
<button id="btn">打开新窗口</button>
<script src="son.js"></script>
</body>
</html>
2.在原有根目录下创建新new.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子窗口</title>
</head>
<body>
<h1>子窗口</h1>
</body>
</html>
3. 创建新窗口的new.js:
const { remote } = require('electron')
window.addEventListener('DOMContentLoaded', () => {
const btn = document.getElementById('btn')
btn.addEventListener('click', () => {
let sonWin = new remote.BrowserWindow({
with: 300,
height: 300,
autoHideMenuBar: true,
})
sonWin.loadFile('new.html')
sonWin.on('close', () => {
sonWin = null
})
})
})
4. 并在主进程main.js 的BrowserWindow添加如下属性:
let winMain = new BrowserWindow({
width: 600,
height: 600,
webPreferences: {
nodeIntegration: true,//是否启用Node integration. 默认值为 false
enableRemoteModule: true
}
})