亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Electron實現(xiàn)多標簽頁模式詳解

 更新時間：2024年11月20日 10:24:19   作者：若邪  
Electron 都發(fā)展這么多年了,讓人想不到的是,要實現(xiàn)一個多標簽頁的功能居然沒有能用的輪子,本文就來用比較low的方案 - iframe手搓一個吧

上文介紹了 如何在 Electron 中優(yōu)雅的進行進程間通訊，接下來說說如何在 Electron 實現(xiàn)多標簽頁模式，如下圖。

Electron 都發(fā)展這么多年了，讓人想不到的是，要實現(xiàn)一個多標簽頁的功能居然沒有能用的輪子。能在 Github 上找到 Star 最多的一個輪子（Tab component for Electron）也已經(jīng)不再更新，而且還是使用 Electron 建議不再使用的 WebView 實現(xiàn)的（Web 嵌入 | Electron）。后面也有人基于 BrowserView 實現(xiàn)了一套，但是現(xiàn)在 Electron 又不推薦使用 BrowserView 了，建議使用 WebContentsView。因為項目比較急，沒有花太多時間去研究了，就用比較 low 的方案 - iframe 自己搓了一個。

直接看 HTML 的結(jié)構(gòu)吧，如下

也就是一個 tab 對應(yīng)一個 iframe。

界面沒啥好說的，稍微有點復(fù)雜的就是主進程、渲染進程（iframe 所在的頁面）、iframe 之間的通訊。

在實際的業(yè)務(wù)場景中，關(guān)閉窗口的時候需要彈框讓用戶確認、用戶確認后 iframe 里的頁面需要調(diào)接口進行登出，然后通知主進程關(guān)閉窗口。整個消息鏈路涉及了主進程、渲染進程、iframe 頁面，而且還是雙向的。

上文已經(jīng)講了如何封裝主進程、渲染進程之間的通訊，下面講講渲染進程（iframe 所在的頁面）、iframe 之間的通訊。

渲染進程監(jiān)聽消息、處理消息：

export const addIframeWebEventListener = () => {
  window.addEventListener("message", async (event) => {
    const message = event.data as {
      iframeWebCmd: string;
      cbid: string;
      code: number;
      data: never;
    };
    if (message.iframeWebCmd) {
      console.log(message);
      if (message.iframeWebCmd !== "postMessageCallback") {
        if (handle[message.iframeWebCmd]) {
          try {
            const res = await handle[message.iframeWebCmd](message.data);
            invokeCallback(message.cbid, res);
          } catch (ex: unknown) {
            invokeErrorCallback(message.cbid, ex);
          }
        } else {
          invokeErrorCallback(
            message.cbid,
            `方法不存在：${message.iframeWebCmd}`,
          );
        }
      } else {
        if (message.code === 200) {
          (callbacks[message.cbid] || function () {})(message.data);
        } else {
          (errorCallbacks[message.cbid] || function () {})(message.data);
        }
        delete callbacks[message.cbid]; // 執(zhí)行完回調(diào)刪除
        delete errorCallbacks[message.cbid]; // 執(zhí)行完回調(diào)刪除
      }
    }
  });
};

渲染進程主動發(fā)送消息：

function postMessage(
  data: { electronWebCmd: string; data?: any },
  cb?: (data: any) => void,
  errorCb?: (data: any) => void,
) {
  const iframe = document.getElementById(
    tabStore.currentTabId.value!,
  ) as HTMLIFrameElement;
  if (cb) {
    const cbid = Date.now();
    callbacks[cbid] = cb;
    iframe?.contentWindow?.postMessage(
      {
        ...data,
        cbid,
      },
      "*",
    );
    if (errorCb) {
      errorCallbacks[cbid] = errorCb;
    }
  } else {
    iframe?.contentWindow?.postMessage(data, "*");
  }
}

export function request<T = unknown>(params: { cmd: string; data?: any }) {
  return new Promise<T>((resolve, reject) => {
    postMessage(
      { electronWebCmd: params.cmd, data: params.data },
      (res) => {
        resolve(res);
      },
      (error) => {
        reject(error);
      },
    );
  });
}

每一個 iframe 都使用了 id 進行標識，發(fā)送消息就是給當前激活的 tab 對應(yīng)的 iframe 發(fā)消息。

當需要渲染進程給 iframe 發(fā)消息的時候，就可以像調(diào)用 HTTP 請求一樣發(fā)送消息，比如讓 iframe 頁面進行刷新：

export function refresh() {
  return request({
    cmd: "refresh",
  });
}

完整代碼：

/* eslint-disable no-case-declarations */
/* eslint-disable no-shadow */

import { useTabsStore } from "@/store/tabs";
import handle from "./handle";

/* eslint-disable @typescript-eslint/no-explicit-any */
const callbacks: { [propName: string]: (data: any) => void } = {};
const errorCallbacks: { [propName: string]: (data: any) => void } = {};

const tabStore = useTabsStore();

function postMessage(
  data: { electronWebCmd: string; data?: any },
  cb?: (data: any) => void,
  errorCb?: (data: any) => void,
) {
  const iframe = document.getElementById(
    tabStore.currentTabId.value!,
  ) as HTMLIFrameElement;
  if (cb) {
    const cbid = Date.now();
    callbacks[cbid] = cb;
    iframe?.contentWindow?.postMessage(
      {
        ...data,
        cbid,
      },
      "*",
    );
    if (errorCb) {
      errorCallbacks[cbid] = errorCb;
    }
  } else {
    iframe?.contentWindow?.postMessage(data, "*");
  }
}

export function request<T = unknown>(params: { cmd: string; data?: any }) {
  return new Promise<T>((resolve, reject) => {
    postMessage(
      { electronWebCmd: params.cmd, data: params.data },
      (res) => {
        resolve(res);
      },
      (error) => {
        reject(error);
      },
    );
  });
}

function invokeCallback<T = unknown>(cbid: string, res: T) {
  (
    document.getElementById(tabStore.currentTabId.value!) as HTMLIFrameElement
  )?.contentWindow?.postMessage(
    {
      electronWebCmd: "postMessageCallback",
      cbid,
      data: res,
      code: 200,
    },
    "*",
  );
}

function invokeErrorCallback(cbid: string, res: unknown) {
  (
    document.getElementById(tabStore.currentTabId.value!) as HTMLIFrameElement
  )?.contentWindow?.postMessage(
    {
      electronWebCmd: "postMessageCallback",
      cbid,
      data: res,
      code: 400,
    },
    "*",
  );
}

export const addIframeWebEventListener = () => {
  window.addEventListener("message", async (event) => {
    const message = event.data as {
      iframeWebCmd: string;
      cbid: string;
      code: number;
      data: never;
    };
    if (message.iframeWebCmd) {
      console.log(message);
      if (message.iframeWebCmd !== "postMessageCallback") {
        if (handle[message.iframeWebCmd]) {
          try {
            const res = await handle[message.iframeWebCmd](message.data);
            invokeCallback(message.cbid, res);
          } catch (ex: unknown) {
            invokeErrorCallback(message.cbid, ex);
          }
        } else {
          invokeErrorCallback(
            message.cbid,
            `方法不存在：${message.iframeWebCmd}`,
          );
        }
      } else {
        if (message.code === 200) {
          (callbacks[message.cbid] || function () {})(message.data);
        } else {
          (errorCallbacks[message.cbid] || function () {})(message.data);
        }
        delete callbacks[message.cbid]; // 執(zhí)行完回調(diào)刪除
        delete errorCallbacks[message.cbid]; // 執(zhí)行完回調(diào)刪除
      }
    }
  });
};

iframe 頁面監(jiān)聽消息、處理消息：

export const addElectronWebWebEventListener = () => {
  window.addEventListener("message", async (event) => {
    const message = event.data as {
      electronWebCmd: string;
      cbid: string;
      code: number;
      data: never;
    };
    if (message.electronWebCmd) {
      if (message.electronWebCmd !== "postMessageCallback") {
        if (handle[message.electronWebCmd]) {
          try {
            const res = await handle[message.electronWebCmd](message.data);
            invokeCallback(message.cbid, res);
          } catch (ex: unknown) {
            invokeErrorCallback(message.cbid, ex);
          }
        } else {
          invokeErrorCallback(
            message.cbid,
            `方法不存在：${message.electronWebCmd}`,
          );
        }
      } else {
        if (message.code === 200) {
          (callbacks[message.cbid] || function () {})(message.data);
        } else {
          (errorCallbacks[message.cbid] || function () {})(message.data);
        }
        delete callbacks[message.cbid]; // 執(zhí)行完回調(diào)刪除
        delete errorCallbacks[message.cbid]; // 執(zhí)行完回調(diào)刪除
      }
    }
  });
};

iframe 發(fā)送消息：

function postMessage(
  data: { iframeWebCmd: string; data?: unknown },
  cb?: (data: unknown) => void,
  errorCb?: (data: unknown) => void,
) {
  if (cb) {
    const cbid = Date.now();
    callbacks[cbid] = cb;
    window.parent?.postMessage(
      {
        ...data,
        cbid,
      },
      "*",
    );
    if (errorCb) {
      errorCallbacks[cbid] = errorCb;
    }
  } else {
    window.parent?.postMessage(data, "*");
  }
}

export function request<T = unknown>(params: { cmd: string; data?: unknown }) {
  return new Promise<T>((resolve, reject) => {
    postMessage(
      { iframeWebCmd: params.cmd, data: params.data },
      (res) => {
        resolve(res as T);
      },
      (error) => {
        reject(error);
      },
    );
  });
}

如此一來 iframe 頁面發(fā)消息的時候也很簡單：

/**
 * @description 獲取 mac 地址
 * @returns
 */
export const getMac = () => {
  return request<string>({
    cmd: "getMac",
  });
};

獲取 mac 地址，消息的傳遞過程是：iframe 頁面 -> 渲染進程 -> 主進程，主進程 -> 渲染進程 -> iframe 頁面，屬于雙向通訊。如果沒有做好通訊的封裝，處理起來想想都麻煩，而現(xiàn)在只需要關(guān)注業(yè)務(wù)代碼就好了。

完整代碼：

import handle from "./handle";

/* eslint-disable no-shadow */
const callbacks: { [propName: string]: (data: unknown) => void } = {};
const errorCallbacks: { [propName: string]: (data: unknown) => void } = {};
function postMessage(
  data: { iframeWebCmd: string; data?: unknown },
  cb?: (data: unknown) => void,
  errorCb?: (data: unknown) => void,
) {
  if (cb) {
    const cbid = Date.now();
    callbacks[cbid] = cb;
    window.parent?.postMessage(
      {
        ...data,
        cbid,
      },
      "*",
    );
    if (errorCb) {
      errorCallbacks[cbid] = errorCb;
    }
  } else {
    window.parent?.postMessage(data, "*");
  }
}

export function request<T = unknown>(params: { cmd: string; data?: unknown }) {
  return new Promise<T>((resolve, reject) => {
    postMessage(
      { iframeWebCmd: params.cmd, data: params.data },
      (res) => {
        resolve(res as T);
      },
      (error) => {
        reject(error);
      },
    );
  });
}

function invokeCallback<T = unknown>(cbid: string, res: T) {
  window.parent?.postMessage(
    {
      iframeWebCmd: "postMessageCallback",
      cbid,
      data: res,
      code: 200,
    },
    "*",
  );
}

function invokeErrorCallback(cbid: string, res: unknown) {
  window.parent?.postMessage(
    {
      iframeWebCmd: "postMessageCallback",
      cbid,
      data: res,
      code: 400,
    },
    "*",
  );
}
export const addElectronWebWebEventListener = () => {
  window.addEventListener("message", async (event) => {
    const message = event.data as {
      electronWebCmd: string;
      cbid: string;
      code: number;
      data: never;
    };
    if (message.electronWebCmd) {
      if (message.electronWebCmd !== "postMessageCallback") {
        if (handle[message.electronWebCmd]) {
          try {
            const res = await handle[message.electronWebCmd](message.data);
            invokeCallback(message.cbid, res);
          } catch (ex: unknown) {
            invokeErrorCallback(message.cbid, ex);
          }
        } else {
          invokeErrorCallback(
            message.cbid,
            `方法不存在：${message.electronWebCmd}`,
          );
        }
      } else {
        if (message.code === 200) {
          (callbacks[message.cbid] || function () {})(message.data);
        } else {
          (errorCallbacks[message.cbid] || function () {})(message.data);
        }
        delete callbacks[message.cbid]; // 執(zhí)行完回調(diào)刪除
        delete errorCallbacks[message.cbid]; // 執(zhí)行完回調(diào)刪除
      }
    }
  });
};

在 Electron 里基于 iframe 的方案實現(xiàn)多標簽頁，有一個致命的缺陷就是，如果 iframe 里的頁面屬于第三方，那么就無法與里面的頁面進行同通訊，比如我在實現(xiàn)刷新標簽頁的時候，是給 iframe 里的頁面發(fā)送消息，頁面收到消息后執(zhí)行下面的代碼：

refresh: () => {
    const iframeID = getIframeId();
    if (iframeID) {
      let href = location.href;
      if (href.indexOf("?") === -1) {
        href = href + `?iframeId=${iframeID}`;
      } else {
        if (href.indexOf("iframeId") === -1) {
          href = href + `&iframeId=${iframeID}`;
        }
      }
      location.href = href;
      setTimeout(() => {
        location.reload();
      }, 500);
    } else {
      location.reload();
    }
  }

到此這篇關(guān)于Electron實現(xiàn)多標簽頁模式詳解的文章就介紹到這了,更多相關(guān)Electron多標簽頁模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • JS實現(xiàn)的自定義右鍵菜單實例二則

    JS實現(xiàn)的自定義右鍵菜單實例二則

    這篇文章主要介紹了JS實現(xiàn)的自定義右鍵菜單,以兩則實例形式分析了javascript自定義右鍵菜單效果的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-09-09
  • 移動端Ionic App 資訊上下循環(huán)滾動的實現(xiàn)代碼(跑馬燈效果)

    移動端Ionic App 資訊上下循環(huán)滾動的實現(xiàn)代碼(跑馬燈效果)

    這篇文章主要介紹了移動端Ionic App 資訊上下循環(huán)滾動的實現(xiàn)代碼，實現(xiàn)方法需要借助jQuery庫的選擇器和動畫函數(shù)，并且把jquery的操作封裝到指令里，具體指令代碼大家通過本文學習吧
    2017-08-08
  • JavaScript實現(xiàn)隨機點名器實例詳解

    JavaScript實現(xiàn)隨機點名器實例詳解

    這篇文章主要介紹了JavaScript隨機點名器，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • Javascript三種字符串連接方式及性能比較

    Javascript三種字符串連接方式及性能比較

    這篇文章主要介紹了Javascript三種字符串連接方式及性能比較，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • JavaScript forEach()遍歷函數(shù)使用及介紹

    JavaScript forEach()遍歷函數(shù)使用及介紹

    這篇文章主要介紹了JavaScript forEach()遍歷函數(shù)使用及介紹,本文講解了使用forEach遍歷數(shù)組的用法以及提前終止循環(huán)的一個方法技巧,需要的朋友可以參考下
    2015-07-07
  • 在JS中如何使用css變量詳解

    在JS中如何使用css變量詳解

    這篇文章主要給大家介紹了關(guān)于如何在JS中如何使用css變量以及export之javascript關(guān)鍵字的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2021-09-09
  • 一文帶你搞懂JS中導(dǎo)入模塊import和require的區(qū)別

    一文帶你搞懂JS中導(dǎo)入模塊import和require的區(qū)別

    JavaScript中，模塊是一種可重用的代碼塊，它將一些代碼打包成一個單獨的單元，并且可以在其他代碼中進行導(dǎo)入和使用。JavaScript中有兩種常用的方式：使用import和require，本文主要聊聊他們二者的區(qū)別
    2023-03-03
  • 小程序自定義組件實現(xiàn)城市選擇功能

    小程序自定義組件實現(xiàn)城市選擇功能

    這篇文章主要介紹了小程序自定義組件實現(xiàn)城市選擇功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-07-07
  • 原生js實現(xiàn)的貪吃蛇網(wǎng)頁版游戲完整實例

    原生js實現(xiàn)的貪吃蛇網(wǎng)頁版游戲完整實例

    這篇文章主要介紹了原生js實現(xiàn)的貪吃蛇網(wǎng)頁版游戲完整實例,可實現(xiàn)自主選擇游戲難度進行貪吃蛇游戲的功能,涉及javascript鍵盤事件及頁面元素的操作技巧,需要的朋友可以參考下
    2015-05-05
  • JavaScript實現(xiàn)獲取img的原始尺寸的方法詳解

    JavaScript實現(xiàn)獲取img的原始尺寸的方法詳解

    在微信小程序開發(fā)時，它的image標簽有一個默認高度，這樣你的圖片很可能出現(xiàn)被壓縮變形的情況，所以就需要獲取到圖片的原始尺寸對image的寬高設(shè)置，本文就來分享一下JavaScript實現(xiàn)獲取img的原始尺寸的方法吧
    2023-03-03

最新評論