IE 下 iframe 跨域調用父窗口 onclick 失效的排查與解決

問題現象

在 iframe 頁面中執行 window.parent.document.getElementById("CloseWindows").onclick = function() {}，IE 不執行，無報錯。

核心原因：同源策略

瀏覽器禁止不同源（協議/域名/端口任一不同）的文檔互相訪問 DOM。IE 對同源策略執行尤為嚴格，甚至阻止同源但信任區域不同的訪問。

排查清單

1. 確認同源：父頁面與 iframe 頁面域名、協議、端口完全一致。
2. 檢查文檔模式：IE 可能以兼容模式渲染導致 document.domain 設置失效。強制邊緣模式：<meta http-equiv="X-UA-Compatible" content="IE=Edge">。
3. domain 緩解：若僅子域不同，雙方均設置 document.domain = 'example.com';（僅限 IE/舊版 Edge）。

現代解決方案：postMessage

跨域通訊首選 window.postMessage，安全且標準化：

// 父頁面
window.addEventListener('message', (e) => {
    if (e.origin !== 'https://trusted-child.com') return;
    if (e.data === 'close') document.getElementById('CloseWindows').click();
});

// iframe 頁面
window.parent.postMessage('close', 'https://parent.com');

避坑指南

• 不要直接在 iframe 中操作父窗口 DOM，耦合度高且脆弱。
• 若必須支持舊 IE，考慮使用 iframe.src = 'javascript:parent.handleClose()' 等 Hack，但極不推薦。