electron套壳web网站应用实现标签页
2023-06-13 09:11:42 时间
公司有需求需要使用 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,
});
}
});
然后我们就可以实现点击应用后新开页签来使用应用了。
# 参考资料
相关文章
- 玩转 Spring Boot 应用篇(引入Redis解决店铺高并发读的问题)(十七)
- 3-Docker应用部署
- asp.net core 成为构建企业web应用首选
- 什么是 Web 应用里加载 google font 带来的 FOIT 和 FOUT 问题?
- MySQL变量的自增特性应用(mysql变量自增)
- 给你一个美观、安全的Web连接MySQL指南(web连接mysql)
- 服务Linux下访问Web服务的指南(linux访问web)
- 器Linux下检查Web服务器状态的方法(linux查看web服务)
- 基于Ruby和MySQL的Web应用开发(rubymysql)
- Linux操作系统的令人惊叹的应用范围(linuxrange)
- 使用Linux优化Web开发体验(web开发linux)
- 使用Koa2与Redis快速构建Web应用(koa2redis)
- 与web技术基于MySQL Redis与Web技术的一体化应用(mysqlredis)
- Web上构建Redis应用的指南(Webredis)
- 提升经营效率:Oracle ERP系统的应用(oracleerp系统)
- 快速部署Web应用:使用Linux运行WAR文件(linux部署war)
- 优化MySQL数据库应用索引的使用(c mysql 索引)
- 用beego与mysql共同开发完美Web应用(beego和mysql)
- 的应用Web开发中Redis的助力极大提升项目效率(web项目中redis)
- Web构建Redis连接简单而有效的实现方式(web 连接redis)
- Web应用之Redis让你的数据焕发新生(web redis应用)
- 使用Redis加快部署Web应用的速度(redis部署web应用)
- 应用基于Redis的Web应用运行稳定性提升(redis运行web)
- JavaScript应用技巧集合[推荐]