HTML Dialog 彈窗間數據傳遞：跨 iframe 獲取子頁面元素值

場景描述

編輯彈窗 → 點擊「部門」 → 彈出部門樹彈窗 → 選中部門後需將值回填到編輯彈窗。兩個 Dialog 通常以 iframe 形式嵌套。

核心技術：父子 iframe 通訊

// 子彈窗（部門樹）選中後，回填父彈窗（編輯頁）
// 方式 1：直接操作父頁 DOM（同域下）
window.parent.document.getElementById('deptInput').value = selectedDeptName;
window.parent.document.getElementById('deptId').value = selectedDeptId;
closeDialog(); // 關閉子彈窗

// 方式 2：父頁暴露回調函數（推薦，解耦）
// 父頁：
window.setDeptCallback = function(name, id) {
    $('#deptInput').val(name);
    $('#deptId').val(id);
};
// 子頁：
window.parent.setDeptCallback(selectedDeptName, selectedDeptId);

原文答案解析

diag.innerFrame.contentWindow.document.getElementById("") 是從父頁獲取子 iframe 內部元素的語法，適用於父頁主動拉取數據的場景。

最佳實踐建議

• 優先使用 回調函數模式，子頁主動推送，耦合度低。
• 同域前提下可直接跨 iframe 操作 DOM；跨域需用 postMessage。
• 關閉子彈窗前確保數據已寫入父頁，避免競態條件。