window.open新窗口无法获取HTML元素ID返回null的问题求助

点击按钮通过window.open打开新窗口，窗口能正常显示内容，但调用window.iframeWindow.document.getElementById("issafe_table_modal")时，变量table_modal返回null。调试时确认window.iframe.document存在，但无法找到目标ID，请问为何会返回null？

相关代码 #

触发窗口打开的JavaScript代码

document.getElementById("showModalBtnIs").addEventListener("click", function () {
    // 创建新窗口并设置尺寸
    window.iframeWindow = window.open("static/issafemodal.html", "_blank", "resizable=1,scrollbars=1,height=400, width=400, left=100, toolbar=0, menubar=0,status=1");
    
    // 存储新窗口的document引用
    window.iframeDocument = window.iframeWindow.document;

    if (window.iframeDocument) {
        let table_modal = window.iframeDocument.getElementById("issafe_table_modal");
        table_modal.style.display = "block";
        let closeModal = table_modal.querySelector(".close");
    }
});

新窗口的HTML内容

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/styles.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <title>IsSafe Settings</title>
</head>
<body>
    <style>
        h4 {
            text-align: center;
            color: gray;
            margin: 0
        }
        body {
            padding: 1em;
            margin: 0
        }
    </style>
    <div id="issafe_table_modal" >
        <div id="modalContent" >
            <h4>IsSafe Settings</h4>
            <table class="table-striped" id="dataTableIs">
                <thead>
                    <tr>
                        <th>Key</th>
                        <th>Value</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody id="tableBodyIs">
                </tbody>
            </table>
            <div class="text-center">
                <span class="btn btn-secondary close" id='btn-issafe'>Close</span>
            </div>
        </div>
    </div>
</body>
</html>

核心问题是新窗口的DOM还未加载完成，就执行了查找元素的代码。window.open调用后，浏览器会异步加载新页面的资源并构建DOM树，但你紧接着就调用getElementById，此时新页面的DOM还没完全渲染，自然找不到目标元素，返回null。

要确保新窗口的DOM完全加载后再执行DOM操作，最直接的方法是监听新窗口的load事件：

修改后的触发代码：

document.getElementById("showModalBtnIs").addEventListener("click", function () {
    window.iframeWindow = window.open("static/issafemodal.html", "_blank", "resizable=1,scrollbars=1,height=400, width=400, left=100, toolbar=0, menubar=0,status=1");
    
    // 监听新窗口的load事件，页面所有资源加载完成后再操作DOM
    window.iframeWindow.addEventListener('load', function() {
        let table_modal = window.iframeWindow.document.getElementById("issafe_table_modal");
        if (table_modal) {
            table_modal.style.display = "block";
            let closeModal = table_modal.querySelector(".close");
            // 这里可以添加close按钮的点击事件逻辑
            closeModal.addEventListener('click', function() {
                window.iframeWindow.close();
            });
        }
    });
});

补充说明 #

• load事件触发时，新窗口的DOM、样式表、脚本、图片等所有资源都已加载完成，此时查找元素不会返回null。
• 如果只需要DOM结构加载完成（不需要等待资源），也可以监听新窗口的DOMContentLoaded事件，触发时机比load更早。

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