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');
}

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

以上关于08. Electron 中嵌入网页和打开子窗口的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。