公司有需求需要使用 electron 作为外壳包裹一个已存在的网站作为本地客户端使用，但是希望网站内打开外部应用时使用标签页的形式，如果你也有类似需求可以参考本文。
# 开发过程
前面我们介绍了electron-tabs 打包方法。
本次我们需要对这个项目的内容做下修改以适应页签形式打开应用。
首先现有的网站包含了一个页面展示所有的应用，点击应用后会新开窗口打开应用。对应着我们需要在用户点击应用之后 electron 会新开一个内嵌窗口。
因为 web 站点是使用web-view标签加载的，所以我们要让用户点击之后发送事件消息到浏览器线程去新开web-view标签页加载指定应用。
那么如何传递消息呢，我们注意到 electron 的web-view标是可以支持console-message事件的，所以可以基于这个 API 实现。
下面来介绍一下实现的过程。
- 约定消息数据结构。
首先我们新开应用页签时需要显示 tab 页的 title 标题，加载应用地址，结构如下所示：
{""url":"http://oa-web.test.kai12.cn/oauth?appCode=documentFlow","name":"公文流转"}
- 网站点击事件消息传输。
在应用点击事件里面使用console.log()打印消息内容：
let param = { url: data.url, name: data.name };
let print = console;
if (print && print.log) {
print.log(JSON.stringify(param));
}
因为 vue 项目中打包时会把日志语句过滤掉，所以这里要新建引用日志对象实现log打印。
- 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,
});
}
});
然后我们就可以实现点击应用后新开页签来使用应用了。
