使用Web前端技术开发桌面应用---Electron中嵌入网页和打开子窗口

码字不易，有帮助的同学希望能关注一下我的GZH, 代码自用自取, 谢谢哦

上期内容我们学了如何在浏览器中打开网页，这节我们学习一下如何用BrowserView来嵌入一个网页到我们应用中，这很类似Web中的<iframe>标签。需要注意的是BrowserView是主进程中的类，所以只能在主进程中使用。

在主线程中用BrowserView嵌入网页

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

  var BrowserView = electron.BrowserView; // 引入BrowserView
    var view = new BrowserView();   //new出对象
    mainWindow.setBrowserView(view);    // 在主窗口中设置view可用
    view.setBounds({    //  定义view的具体样式和位置
        x:0,
        y:120,
        width:500,
        height:500
    })
    view.webContents.loadURL('https://blog.csdn.net/m0_46171043?spm=1001.2101.3001.5343');  //view载入的页面

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

我view引入的是我CSDN博客的主页，主线程loadFile的还是上期的html页面。 测试的效果就是上面截图的内容，可以成功的把网页嵌入窗口中。

用window.open打开子窗口

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

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

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

var mybtn = document.querySelector('#mybtn')

mybtn.onclick = function(e){

    window.open('https://blog.csdn.net/m0_46171043?spm=1001.2101.3001.5343')
}

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

参考链接：jspang.com/

欢迎交流合作:

QQ: 505417246

wx: 18331092918