使用window.open()打开子窗口后无法获取子窗口DOM元素怎么解决

问题根因 #

• 同源策略限制：首先要确保父窗口和你打开的http://localhost/example.html完全同源，协议、域名、端口三者必须完全一致，否则跨域场景下浏览器安全规则会直接阻止父窗口访问子窗口的DOM内容。
• 子页面加载时序问题：调用window.open之后立即读取child.document时，子窗口的页面资源还未完成加载、DOM还没渲染完成，自然无法获取到对应元素。

解决方案 #

步骤1：确认同源条件满足 #

父子窗口同源是跨窗口操作DOM的基础前提，该限制无法绕过，必须先保证二者域名、端口、协议完全匹配。

步骤2：监听子窗口加载完成事件后再操作DOM #

不要在调用window.open后立即操作子窗口DOM，等子窗口资源加载完成后再执行元素获取、html2canvas截图逻辑，示例代码如下：

var child = window.open("http://localhost/example.html");
// 监听子窗口加载完成事件
child.addEventListener('load', function() {
    // 此时子窗口DOM已完全渲染，可以正常获取元素
    var targetDiv = child.document.getElementById("myDiv");
    console.log(targetDiv);
    // 执行html2canvas逻辑，注意要指定子窗口的window对象，避免上下文错误
    html2canvas(targetDiv, {
        window: child,
        useCORS: true
    }).then(canvas => {
        // 图片保存逻辑，示例为直接下载
        var link = document.createElement('a');
        link.download = '页面截图.png';
        link.href = canvas.toDataURL('image/png');
        link.click();
    });
});

异步渲染场景兼容 #

如果子窗口内存在接口请求、动态渲染的内容，仅监听load事件不足以保证DOM完全生成，可以通过postMessage做父子窗口通信：

• 子窗口example.html内新增代码：

// 所有异步内容渲染完成后执行
window.parent.postMessage({type: 'domRenderComplete'}, '*');
// 生产环境建议把*替换为父窗口的具体域名，提升安全性

• 父窗口内新增消息监听逻辑：

var child = window.open("http://localhost/example.html");
window.addEventListener('message', function(e) {
    // 校验消息来源是当前打开的子窗口
    if(e.source === child && e.data.type === 'domRenderComplete') {
        // 执行DOM获取、截图逻辑即可，代码同上
    }
})

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