如何向DOMImplementation.createHTMLDocument()创建的新文档添加JavaScript

问题原因 #

你写的代码无法触发交互是两个核心限制导致的：

• 浏览器出于安全规则，通过importNode方法导入的<script>节点不会被主动执行
• 离线创建的HTML文档整体替换iframe根节点时，内部脚本的执行上下文不会被正确绑定到iframe的window对象上

解决方案 #

直接通过iframe的contentDocument接口写入内容即可，不需要绕「离线文档创建+节点导入」的流程，有两种常用实现方式：

方式1：直接写入HTML内容 #

<html>
<head>
</head>
<body>
    <p><button id="btn" >Click Here</button>  to create a new document and insert it below.</p>
    <iframe id="theFrame" src="about:blank"></iframe>
    <script type="text/javascript">
        document.getElementById("btn").onclick = function () {
            var frame = document.getElementById("theFrame");
            var destDoc = frame.contentDocument;
            // 清空iframe原有内容
            destDoc.open();
            // 写入完整HTML，内部脚本会正常执行
            destDoc.write(`
                <html>
                    <body>
                        <button id="btn1">Alert</button>
                        <script>
                            document.getElementById('btn1').onclick = function() {
                                alert('button clicked!');
                            };
                        <\/script>
                    </body>
                </html>
            `);
            destDoc.close();
        }
    </script>
</body>
</html>

方式2：直接在iframe上下文中创建元素绑定事件（更简洁） #

不需要额外插入script标签，直接给按钮绑定事件即可：

document.getElementById("btn").onclick = function () {
    var frame = document.getElementById("theFrame");
    var destDoc = frame.contentDocument;
    // 清空原有内容
    destDoc.body.innerHTML = '';

    var button = destDoc.createElement("button");
    button.innerHTML = "Alert";
    button.setAttribute("id","btn1");
    destDoc.body.appendChild(button);

    // 直接绑定点击事件
    button.onclick = function() {
        alert('button clicked!');
    };
}

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