使用 PostMessage 控制 iframe

概述

由於同源政策限制，外接網站無法直接存取或控制 iframe 的內容，因此我們提供 iframe 嵌入服務，讓外接網站透過 PostMessage 與 iframe 進行安全的跨來源通訊，實現導航操作（返回、前進）、狀態同步或事件通知等功能。

範例

<iframe id="gamePage"></iframe>

const gameUrl = getGameLoginUrl();
const gameOrigin = new Url(gameUrl).origin

const iframe = document.getElementById('gamePage');

// 回到上一頁
function goBack() {
  const command = { type: 'navigation', action: 'goBack' }
  // 使用與gameUrl相同的gameOrigin來確保安全傳輸資料
  iframe.contentWindow.postMessage(command, gameOrigin);
}

function goForward() {
  const command = { type: 'navigation', action: 'goForward' }
  // 使用與gameUrl相同的gameOrigin來確保安全傳輸資料
   iframe.contentWindow.postMessage(command, gameIframeOrigin);
}

支持的操作

• goBack: 返回上一頁，發送命令 { type: 'navigation', action: 'goBack' }
• goForward: 前進到下一頁，發送命令 { type: 'navigation', action: 'goForward' }

安全注意事項

指定目標來源: 避免使用 '*' 作為 targetOrigin，請指定我們網站的確切 URL

功能請求

如果需要其他功能可以提出請求