用Electron创建跨平台应用（七）多窗口

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代码：

  
  



  
我的第一个应用!