ExtJS 4 iframe 頁面跨文檔操作 Store：父頁面刷新子頁面 Grid 數據

場景：主頁面 Home Page 內嵌 iframe 載入 homepage.jsp，iframe 內有 Grid 顯示待辦事項。用戶在 iframe 內操作關閉某條待辦，需同步刷新父頁面 Home Page 的待辦列表 Store。

核心難點：跨 iframe 訪問 ExtJS 組件

iframe 創建獨立的 JavaScript 作用域，父頁面無法直接調用 Ext.getCmp('gridId') 獲取子頁面組件。

解決方案：父頁面通過 iframe.contentWindow 橋接

// 父頁面 Home Page 代碼
var iframeWin = document.getElementById('home').contentWindow; // 獲取 iframe 的 window
var grid = iframeWin.Ext.getCmp('gridPanelId'); // 在 iframe 作用域下獲取 Grid
var store = grid.getStore();

// 移除指定記錄 (假設已知 recordId)
var record = store.getById(recordId);
if (record) {
    store.remove(record);
    // 或 store.load() 重新載入
}

關鍵前置條件

1. iframe Grid 必須配置固定 id：
   { xtype: 'grid', id: 'gridPanelId', ... }
2. 同域策略：父頁面與 iframe 頁面必須**同源** (協議、域名、埠相同)，否則瀏覽器阻止 contentWindow 跨域訪問。若跨域，需用 postMessage 通信。
3. ExtJS 版本一致：父子頁面加載同一版本 ExtJS，避免 Ext.getCmp 行為差異。

替代方案：postMessage 解耦 (推薦跨域或解耦場景)

子頁面 (iframe) 操作後發送消息：

// homepage.jsp 內關閉操作完成後
window.parent.postMessage({type: 'TODO_CLOSED', recordId: 123}, '*');

父頁面監聽並處理：

window.addEventListener('message', function(e) {
    if (e.data.type === 'TODO_CLOSED') {
        var store = Ext.getCmp('parentGridId').getStore();
        var rec = store.getById(e.data.recordId);
        if (rec) store.remove(rec);
    }
}, false);

postMessage 打破同域限制，且降低父子頁面耦合，是現代化優選方案。