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打开子窗口

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 08. Electron 中嵌入网页和打开子窗口

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们