electron套殼web網站應用實作标簽頁

公司有需求需要使用 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,
    });
  }
});

複制

然後我們就可以實作點選應用後新開頁簽來使用應用了。

# 參考資料

console-message
electron-tabs