IE11中window.open新窗口的onload事件无法触发问题

嗨，这问题我之前也碰到过，IE11在处理新窗口的DOM事件和跨上下文元素操作时确实有不少坑，咱们一步步来解决：

问题出在哪？ #

你遇到的情况主要是两个IE11独有的兼容性问题：

1. 跨上下文DOM元素不能混用：你用当前页面的document创建了<script>标签，再塞到新窗口的DOM里，Chrome和Firefox对这种操作比较宽松，但IE11直接禁止了，认为这是跨上下文的非法操作。
2. onload事件触发时机不对：当新窗口是空白极简页面时，IE11可能在你绑定onload事件之前就已经把页面标记为“加载完成”了，导致你的回调根本不会执行。

修复后的代码 #

直接看修改后的代码，我把关键坑都填上了：

var windowX = window.open('page.html', 'newWindow', 'width=600,height=600');

// 用轮询代替直接绑定onload，确保能抓到页面就绪的时机
var checkWindowReady = setInterval(function() {
    try {
        // 检查新窗口的文档是否可访问且加载完成
        if (windowX && windowX.document && windowX.document.readyState === 'complete') {
            clearInterval(checkWindowReady);
            initNewWindow();
        }
    } catch (e) {
        // 偶尔IE11会弹权限警告，这里捕获一下不影响主流程
        console.warn('检查新窗口状态时出了点小问题:', e);
    }
}, 50);

function initNewWindow() {
    // 在新窗口的上下文里弹alert，确保能触发
    windowX.alert('hello!');

    // 重点！用新窗口自己的document创建脚本元素，不能用当前页面的
    var script = windowX.document.createElement('script');
    script.type = 'text/javascript';
    script.src = '/scripts/newScript.js';

    // 有些空白页面默认没有head标签，这里做个兼容处理
    var head = windowX.document.head || 
               windowX.document.getElementsByTagName('head')[0] || 
               windowX.document.documentElement;
    
    head.appendChild(script);

    // 如果需要在脚本加载完成后做操作，可以加个onload回调
    script.onload = function() {
        console.log('新脚本加载好了，现在可以用里面的对象啦');
    };
}

为啥这么改？ #

• 轮询代替onload：绕开IE11对空白页面onload事件的触发时机问题，确保我们的初始化代码一定能执行。
• 用新窗口的document创建元素：彻底解决跨上下文DOM操作的限制，这是IE11要求的硬性规则。
• 兼容无head的情况：空白HTML页面可能默认没有<head>标签，所以我们做了兜底处理，确保脚本能正确插入。

之前你试的jQuery方法没用，是因为jQuery的ready和load本质还是依赖原生的DOM事件，同样会被IE11的时机问题坑到，原生轮询反而更靠谱。

内容的提问来源于stack exchange，提问作者Will