Electron 中嵌入网页和打开子窗口

Question

用 BrowserView 来嵌入一个网页到我们应用中，这很类似 Web 中的 <iframe> 标签。需要注意的是 BrowserView 是主进程中的类，所以只能在主进程中使用。

在主进程中用 BroeserView 嵌入网页

打开根目录下打开 main.js，直接引入并使用 BrowserView 就可以实现键入网页到应用中。

var BrowserView = electron.BrowserView //引入BrowserView
var view = new BrowserView()   //new出对象
mainWindow.setBrowserView(view)   // 在主窗口中设置view可用
view.setBounds({x:0,y:100,width:1200, height:800})  //定义view的具体样式和位置
view.webContents.loadURL('https://jspang.com')  //wiew载入的页面

这个使用起来非常简单，写完上面的代码，就可以在终端中输入一下 electron .，运行程序，测试一下效果了。

用 window.open 打开子窗口

我们以前使用过 BrowserWindow，这个是有区别的，我们通常把 window.open 打开的窗口叫做子窗口。在demo3.html中，加入一个按钮，代码如下：

<button id="mybtn" >打开子窗口</button>

然后打开 demo3.js，获取 button 的DOM节点，然后监听 onclick 事件，代码如下：

var mybtn = document.querySelector('#mybtn')
mybtn.onclick = function(e){
  window.open('https://jspang.com')
}

这样就完成了子窗口的打开

window.open 打开的就是子窗口，而 BrowserWindow 打开的就是一个窗口而已。