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

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。

上期内容我们学了如何在浏览器中打开网页，这节我们学习一下如何用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')
}

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

---

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢