公司有需求需要使用 electron 作为外壳包裹一个已存在的网站作为本地客户端使用,但是希望网站内打开外部应用时使用标签页的形式,如果你也有类似需求可以参考本文。
# 开发过程
前面我们介绍了electron-tabs 打包方法。 本次我们需要对这个项目的内容做下修改以适应页签形式打开应用。
首先现有的网站包含了一个页面展示所有的应用,点击应用后会新开窗口打开应用。对应着我们需要在用户点击应用之后 electron 会新开一个内嵌窗口。
因为 web 站点是使用web-view
标签加载的,所以我们要让用户点击之后发送事件消息到浏览器线程去新开web-view
标签页加载指定应用。
那么如何传递消息呢,我们注意到 electron 的web-view
标是可以支持console-message
事件的,所以可以基于这个 API 实现。
下面来介绍一下实现的过程。
{""url":"http://oa-web.test.kai12.cn/oauth?appCode=documentFlow","name":"公文流转"}
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,
});
}
});
然后我们就可以实现点击应用后新开页签来使用应用了。
# 参考资料
原文地址:https://cloud.tencent.com/developer/article/2088901
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。