iframe 嵌入 EasyUI 頁面時，父頁面正確訪問子頁面元件的方法

常見錯誤

許多初學者在父頁面嘗試用 jQuery 選取器直接跨 iframe 訪問 EasyUI 元件：

// 錯誤寫法
$('#ss_frame').contentWindow.$('#dgMANUF').datagrid('getSelected');
// 錯誤原因：jQuery 物件無 contentWindow 屬性，會拋出 "無法獲取屬性 nodeName" 錯誤

正確訪問方式 (兩種)

1. 原生 DOM + jQuery：

   document.getElementById('ss_frame').contentWindow.$('#dgMANUF').datagrid('getSelected');

2. jQuery 找 iframe 再取 contentWindow：

   $.find('iframe')[0].contentWindow.$('#dgMANUF').datagrid('getSelected');

核心原則：先取得 iframe 的 contentWindow，再在該視窗上下文中使用 jQuery/EasyUI API。

iframe 載入時序問題與解決

動態設定 iframe.src 後，腳本立即執行會因頁面未載入完成而失敗。

解決方案：載入完成通知機制

在子頁面 (iframe 內) 的 <body onload="..."> 或 $(document).ready() 中通知父頁面：

// 子頁面
window.parent.iframeLoaded = true; // 或呼叫父頁面回呼函數

父頁面輪詢或事件驅動等待：

// 父頁面
var checkLoaded = setInterval(function() {
    var frame = document.getElementById('ss_frame');
    if (frame.contentWindow.iframeLoaded) {
        clearInterval(checkLoaded);
        // 此處安全呼叫 EasyUI API
        frame.contentWindow.$('#dgMANUF').datagrid('reload');
    }
}, 100);

簡易替代方案：寫入載入提示

document.getElementById('ss_frame').contentWindow.document.write('loading...');

強制瀏覽器開始解析 iframe 內容，但無法保證 EasyUI 元件已初始化完成，建議採用上述回呼機制。

最佳實務總結

• 跨域限制：若父子頁面不同源 (協定/域名/埠)，contentWindow 存取會被瀏覽器阻擋，需用 postMessage 通訊。
• 元件銷毀：離開頁面前呼叫 datagrid('destroy') 釋放資源，避免記憶體洩漏。
• 版本相容：EasyUI 版本差異大，API 以官方文件為準。