electron打开新窗口和当前窗口内容替换（二）

例子

html页面添加事件

<ul><li><button onclick&＃61;"openNewWindow()">new BrowserWindowbutton>li><li><button onclick&＃61;"windowOpen()">window.openbutton>li><li>切换页面button>li>
ul>


切换页面 和 打开窗口的方法

1. window.location.href 切换窗口内容
2. window.open 打开新的窗口
3. new BrowserWindow 打开新的窗口

const path &＃61; require(&＃39;path&＃39;)
// 当前页面做切换
function changePage (pageUrl) {window.location.href &＃61; pageUrl
}// 使用 window.open 打开一个新的窗口
function windowOpen () {// window.open 来创建一个新的窗口时候&＃xff0c;将会创建一个 BrowserWindow 的实例&＃xff0c;并且将返回一个标识&＃xff0c;这个界面通过标识来对这个新的窗口进行有限的控制.// window.open(url[, frameName][, features])// url String// frameName String (可选)// features String (可选)let url &＃61; path.join("file://",__dirname,"./pages/introduce.html");let winObj &＃61; window.open(url)console.log("winObj : " &＃43; winObj)
}// 创建一个 BrowserWindow 对象&＃xff0c;打开一个新的窗口
function openNewWindow() {// __dirname 代表的是html文件的路径&＃xff0c;不是js的路径&＃xff1b;E:\gitcode\electron-study\srcconsole.log(__dirname);const modalPath &＃61; path.join("file://",__dirname,"./pages/introduce.html");let win &＃61; new BrowserWindow({ width: 400, height: 275 });win.on("resize", updateReply);win.on("move", updateReply);win.on("close", function() {win &＃61; null;});win.loadURL(modalPath);win.show();function updateReply() {const manageWindowBtn &＃61; document.getElementById("infoContainer");const message &＃61; &＃96;Size: ${win.getSize()} Position: ${win.getPosition()}&＃96;;manageWindowBtn.innerHTML &＃61; message;}
}


如果要使用 require(‘path’), 则需要开启nodejs环境&＃xff0c;否则无法使用

打开新窗口需要 —— 开启nodejs环境

const { app, BrowserWindow, BrowserView, globalShortcut } &＃61; require(&＃39;electron&＃39;)
var mainWindow &＃61; null // 声明要打开的主窗口app.on(&＃39;ready&＃39;, () &＃61;> {// 设置窗口的高度和宽度mainWindow &＃61; new BrowserWindow({width: 800,height: 800,frame: false, // 是否有边框webPreferences: {nodeIntegration: true, // 设置开启nodejs环境enableRemoteModule: true // enableRemoteModule保证renderer.js可以可以正常require(&＃39;electron&＃39;).remote&＃xff0c;此选项默认关闭且网上很多资料没有提到}})// 窗口加载的文件mainWindow.loadFile(&＃39;./src/index.html&＃39;)// 开启渲染进程中的调试模式mainWindow.webContents.openDevTools()// 监听窗口关闭 销毁引用mainWindow.on(&＃39;closed&＃39;, () &＃61;> {mainWindow &＃61; null})
})


1. 设置开启nodejs环境
   webPreferences.nodeIntegration: true

2. enableRemoteModule保证renderer.js可以可以正常require(‘electron’).remote
   webPreferences.enableRemoteModule: true

3. 设置窗口是没有边框的
   frame: false, // 是否有边框