wnd.gif
多窗口是不可或缺的, 而Electron创建多标签也非常的简单,下面是一个简单的演示demo
渲染进程代码（index.html）：
const { remote } = require("electron");
let BrowserWindow = remote.BrowserWindow;
//获取当前窗口坐标，实现打开窗口偏移
let x, y;
const curWnd = BrowserWindow.getFocusedWindow();
if (curWnd) {
const [curWndX, curWndY] = curWnd.getPosition();
x = curWndX + 10;
y = curWndY + 10;
}
//打开远程页面
let wnd_home = null;
document.getElementById("btn_home").onclick = function () {
wnd_home = new BrowserWindow({ width: 1024, height: 768, show: false, x: x, y: y })
wnd_home.loadURL("http://jiweiv.cn");
wnd_home.once('ready-to-show', () => {
wnd_home.show()
})
wnd_home.on("close", function () {
wnd_home = null;
})
}
//打开本地页面
let wnd_local = null;
document.getElementById("btn_local").onclick = function () {
wnd_local = new BrowserWindow({ width: 1024, height: 768, show: false, x: x, y: y })
wnd_local.loadURL(`file://${__dirname}/about.html`);
wnd_local.once('ready-to-show', () => {
wnd_local.show()
})
wnd_local.on("close", function () {
wnd_local = null;
})
}
about.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关于我</title>
</head>
<body>
<h1>我的第一个应用!</h1>
</body>
</html>
