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

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

在主进程中用 BrowserView 嵌入网页

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

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

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

效果如下：

为了方便大家学习，附上 main.js 完整代码：

var electron = require('electron'); // 引入 electron 模块

var app = electron.app; // 创建 electron 引用

var BrowserWindow = electron.BrowserWindow; // 控制窗口引用

var mainWindow = null; // 声明要打开的主窗口

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width:1000,
        height:600,// 设置打开的窗口大小
        webPreferences: {
            contextIsolation: false,
            worldSafeExecuteJavaScript: false,
            webSecurity: false,
            nodeIntegration: true, // 是否集成 node.js，解决 require is not defined 问题
            nodeIntegrationInWorker: true,
            webviewTag: true, // 解决 webview 无法显示问题
            enableRemoteModule: true
        }
    });
    // mainWindow.webContents.openDevTools();
    require('./main/menu.js');
    mainWindow.loadFile('index3.html'); // 加载 HTML 页面

    // BrowserView
    var BrowserView =electron.BrowserView;
    var view = new BrowserView();
    mainWindow.setBrowserView(view);
    view.setBounds({x:0,y:100,width:1000,height:450});
    view.webContents.loadURL('https://mybj123.com');

    // 监听关闭事件，把主窗口设置为 null
    mainWindow.on('closed', () => {
        mainWindow = null;
    })
})

用 window.open 打开子窗口

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

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

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

var mybtn = document.querySelector("#myBtn");
mybtn.onclick = function () {
    window.open('https://mybj123.com');
}

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