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 .,运行程序,测试一下效果了。

效果如下:

在主进程中用BrowserView嵌入网页

为了方便大家学习,附上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');
}

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

用window.open打开子窗口

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 08. Electron 中嵌入网页和打开子窗口

发表评论

提供最优质的资源集合

立即查看 了解详情