告別 iframe 通信的 “飛鴿傳書”：Webpage Tunnel 上手指南詳情 - 前端,javascript,typescript,npm,iframe parksben 博客

作為前端開發，你一定遇到過這樣的場景：

老闆拍着你的肩膀説：“小王啊，把隔壁組做的那個‘用户畫像’頁面，直接用 iframe 嵌到我們的後台裏吧，順便把當前登錄的 Token 傳過去，再把用户選好的標籤拿回來。”

你心想：“這簡單，頁面跨 iframe 可以用 postMessage 方法通信。”

然而當你開始寫代碼時，噩夢開始了。

😫 以前的痛苦：像在用對講機吵架

為了在父頁面和 iframe 之間傳數據，你不得不使用瀏覽器原生的 postMessage。這玩意兒就像是一個公共廣播。

父頁面喊話：iframe.contentWindow.postMessage('嘿！這是 Token', '*')
子頁面監聽：window.addEventListener('message', (e) => { ... })

隨着業務變複雜，你的代碼很快就會變成這樣：

// ❌ 令人頭禿的傳統寫法
window.addEventListener('message', (event) => {
  // 1. 先得確認是不是自己人（安全校驗）
  if (event.origin !== 'https://trusted.com') return;
  
  // 2. 解析數據，還得防着格式不對報錯
  const data = event.data;
  
  // 3. 開始寫一堆 switch-case 來判斷對方到底想幹啥
  switch (data.type) {
    case 'UPDATE_TOKEN':
      // ...邏輯...
      break;
    case 'GET_USER_TAGS':
      // ...邏輯...
      // 4. 還要想辦法把結果“扔”回去
      event.source.postMessage({ type: 'USER_TAGS_RESULT', payload: ... }, event.origin);
      break;
    // ...此處省略一萬行...
  }
});

這就像兩個人隔着一條河喊話，不僅費嗓子，還容易聽錯，而且誰都能插一嘴。維護起來簡直是災難。

😎 現在的救星：Webpage Tunnel

這時候，Webpage Tunnel 登場了。

它的作用很簡單：把那條混亂的“河”填平，給你們拉一根專線電話。

它不再讓你去處理底層的消息監聽和過濾，而是讓你像調用普通函數一樣去跟 iframe 裏的頁面交流。

框架概念圖

核心理念：網頁即服務 (Webpage as a Service)

想象一下，你嵌入的那個 iframe 頁面，不再只是一個頁面，而是一個微型服務器。它對外提供了一組 API 接口，你只需要連接它，然後調用接口拿數據。

亮點一：代碼變得無比清爽

讓我們看看用 Webpage Tunnel 怎麼實現剛才的需求。

1. 在 iframe 頁面（服務方）：\
只需要把你的功能“註冊”一下，就像開店擺攤一樣。

import { serve } from 'webpage-tunnel';

// 把頁面裏的功能打包成 API
serve({
  // 別人調這個方法，我就更新 Token
  updateToken: (token) => {
    localStorage.setItem('auth_token', token);
    return 'Token 更新成功！';
  },
  
  // 別人調這個方法，我就返回標籤數據
  getSelectedTags: async () => {
    // 甚至可以去後台請求數據再返回
    const tags = await fetch('/api/tags').then(res => res.json());
    return tags;
  }
});

2. 在父頁面（調用方）：\
就像打個電話一樣簡單，直接調用！

import { Request } from 'webpage-tunnel';

// 建立連接
const iframeApi = new Request({
  server: 'https://other-site.com/profile', // 對方的地址
  methods: ['updateToken', 'getSelectedTags'] // 我要調用的方法名
});

async function doWork() {
  // ✨ 見證奇蹟的時刻
  // 不需要監聽 message，不需要 switch-case，直接 await 拿結果！
  
  await iframeApi.updateToken('new-token-123');
  console.log('Token 傳過去了');

  const tags = await iframeApi.getSelectedTags();
  console.log('拿到的標籤是：', tags);
}

亮點二：雙向奔赴

不僅僅是父頁面可以調子頁面，子頁面也可以反過來調父頁面。只要雙方都 serve（提供服務）並 new Request（發起請求），就能實現無縫的雙向對話。

亮點三：TypeScript 黨的福音

如果你用 TypeScript，體驗會更上一層樓。你可以定義好接口類型，當你輸入 iframeApi. 的時候，編輯器會自動提示有哪些方法可以調，入參是什麼，返回值是什麼。再也不用擔心拼錯單詞或者傳錯參數了。

總結

Webpage Tunnel 並沒有發明什麼黑科技，它只是把繁瑣的 postMessage 封裝進了一個黑盒子裏，留給你一套優雅、現代的 API。

如果你受夠了 window.addEventListener；
如果你希望 iframe 通信代碼像後端接口調用一樣清晰；
如果你想少掉幾根頭髮；

那麼，Webpage Tunnel 絕對值得你嘗試一下。

傳送門：GitHub 項目地址

parksben 博客

parksben 博客

博客 / 詳情