electron套壳web网站应用实现标签页

2022-06-21 21:32:36

公司有需求需要使用 electron 作为外壳包裹一个已存在的网站作为本地客户端使用,但是希望网站内打开外部应用时使用标签页的形式,如果你也有类似需求可以参考本文。

开发过程

前面我们介绍了electron-tabs 打包方法
本次我们需要对这个项目的内容做下修改以适应页签形式打开应用。

首先现有的网站包含了一个页面展示所有的应用,点击应用后会新开窗口打开应用。对应着我们需要在用户点击应用之后 electron 会新开一个内嵌窗口。

因为 web 站点是使用web-view标签加载的,所以我们要让用户点击之后发送事件消息到浏览器线程去新开web-view标签页加载指定应用。

那么如何传递消息呢,我们注意到 electron 的web-view标是可以支持console-message事件的,所以可以基于这个 API 实现。

下面来介绍一下实现的过程。

  1. 约定消息数据结构。
    首先我们新开应用页签时需要显示 tab 页的 title 标题,加载应用地址,结构如下所示:
{""url":"http://oa-web.test.kai12.cn/oauth?appCode=documentFlow","name":"公文流转"}
  1. 网站点击事件消息传输。
    在应用点击事件里面使用console.log()打印消息内容:
let param = { url: data.url, name: data.name };
let print = console;
if (print && print.log) {
  print.log(JSON.stringify(param));
}

因为 vue 项目中打包时会把日志语句过滤掉,所以这里要新建引用日志对象实现log打印。

  1. electron 应用内事件消息接收。
    官方提供了如下示例代码:
const webview = document.querySelector('webview');
webview.addEventListener('console-message', (e) => {
  console.log('Guest page logged a message:', e.message);
});

我们需要修改electron-tabs的 Demo 页面追加这段事件监听,可以参考下方代码:

// 从标签组中获取当前激活页面的web-veiw对象并添加监听事件
let webview = tabGroup.getActiveTab().webview;
webview.addEventListener('console-message', (e) => {
  console.log('click message:', e.message);
  if (e.message.indexOf('{') != -1) {
    console.log('url json:', JSON.parse(e.message));
    let param = JSON.parse(e.message);
    let url = `${param.url}`;
    tabGroup.addTab({
      title: param.name || '测试应用',
      src: url,
      active: true,
    });
  }
});

然后我们就可以实现点击应用后新开页签来使用应用了。

参考资料

本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码

评 论:

好文推荐
每天进步一点点~