在JavaScript中，封裝一個用于iframe間通信的SDK，可以利用postMessage和message事件監聽來實現跨域通信。以下是一個簡單的示例，展示如何封裝這樣一個SDK：

步驟 1: 創建SDK文件

首先，創建一個名為IframeCommunicator.js的文件，用于存放你的SDK代碼。

步驟 2: 實現SDK邏輯

在IframeCommunicator.js中，你可以這樣實現：

class IframeCommunicator {constructor(options) {this.origin = options.origin || '*'; // 默認接受所有源，實際使用時應具體指定this.targetOrigin = options.targetOrigin; // 如果已知目標iframe的源，則設置它window.addEventListener('message', this._onMessage.bind(this), false);}_onMessage(event) {// 確保消息來自允許的源if (this.origin === '*' || event.origin === this.origin) {// 根據需要處理消息，這里簡單觸發一個回調if (typeof this.messageCallback === 'function') {this.messageCallback(event.data, event.origin);}}}sendMessage(message, targetOrigin = this.targetOrigin) {// 發送消息到iframeif (targetOrigin) {parent.postMessage(message, targetOrigin);} else {console.warn('Target origin not specified. Message not sent.');}}// 設置消息接收回調onMessage(callback) {this.messageCallback = callback;}
}// 導出SDK，以便其他模塊使用
export default IframeCommunicator;

步驟 3: 使用SDK

在主頁面或iframe頁面中，你可以像下面這樣使用這個SDK：

主頁面使用示例：

import IframeCommunicator from './IframeCommunicator.js';const communicator = new IframeCommunicator({targetOrigin: 'https://example.com' // 設置目標iframe的源
});// 設置消息接收處理函數
communicator.onMessage(data => {console.log('Received message:', data);
});// 向iframe發送消息
communicator.sendMessage({ action: 'getUserData' });

iframe頁面使用示例：

同樣地，如果需要在iframe內與父頁面通訊，也可以使用相同的SDK，但需調整targetOrigin為父頁面的源。

注意事項

• 確保指定正確的targetOrigin以防止安全風險。
• 在實際應用中，可能需要根據業務需求細化消息處理邏輯，比如通過檢查消息中的特定字段來決定如何處理。
• 考慮到安全性和性能，最好在不再需要監聽消息時移除事件監聽器。

這樣，你就成功封裝了一個基本的iframe通信SDK，可以提供給其他開發者方便地在他們的項目中實現iframe間的跨域通信。