2
electron套壳web网站应用实现标签页
source link: http://xuedingmiao.com/blog/electron_tabs_app.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
公司有需求需要使用 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,
});
}
});
然后我们就可以实现点击应用后新开页签来使用应用了。
# 参考资料
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK