Electron child windows - yaokun123/php-wiki GitHub Wiki

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

用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打开的就是一个窗口而已。

⚠️ **GitHub.com Fallback** ⚠️