如何正确为JavaScript弹出窗口添加style样式和script脚本资源

• 方案1（createElement插入link）失效原因：
  1. window.open的第二个参数应为窗口名称，你传入了未定义的newWindow变量，不符合API规范，可能导致窗口上下文异常
  2. 空窗口的DOM初始化是异步的，插入link、操作body时，可能窗口的document还未完成初始解析，节点插入后没有触发资源加载
• 方案2（document.write写入资源）报错原因：
  当document已经完成初始加载后调用document.write，浏览器会自动执行document.open()清空整个文档的原有结构，导致后续操作body时找不到对应节点
• 方案3（拼接innerHTML插入head）失效原因：
  1. 如果temp节点是在父窗口的document下创建的，跨窗口上下文插入DOM会存在浏览器兼容限制，link不会触发样式加载
  2. 用innerHTML插入的script标签默认不会被浏览器解析执行，JS引入也会失效

核心逻辑是：主动完成新窗口的文档初始化，所有DOM节点都用新窗口的document创建，必要时监听资源加载事件再操作DOM。
修复后的可运行代码如下：

<html>
  <head>
    <script>
      function popup() {
        var windowFeatures = "menubar=yes,location=yes,resizable=no,scrollbars=yes,status=yes,left=100,top=100";
        // 第二个参数为自定义窗口名，不能传未定义变量
        const newWindow = window.open('', 'myPopup', windowFeatures);
        // 主动初始化新窗口的文档结构，确保head、body存在
        newWindow.document.write('<!DOCTYPE html><html><head></head><body></body></html>');
        newWindow.document.close(); // 关闭文档流，避免后续操作被清空

        // 用新窗口的document创建link节点
        const styleElement = newWindow.document.createElement("link");
        styleElement.rel = "stylesheet";
        styleElement.type = "text/css";
        // 同目录下可直接写文件名，不确定路径时建议用绝对路径避免上下文问题
        styleElement.href = "popupreport.css";
        newWindow.document.head.appendChild(styleElement);

        // 引入JS的标准写法，可监听load事件执行依赖JS的逻辑
        const scriptElement = newWindow.document.createElement("script");
        scriptElement.src = "test.js";
        scriptElement.onload = () => {
          console.log('test.js加载完成，可执行依赖逻辑');
        };
        newWindow.document.head.appendChild(scriptElement);

        // 插入内容节点
        const header = newWindow.document.createElement("h2");
        header.textContent = "Label 2";
        newWindow.document.body.appendChild(header);
      }
    </script>
  </head>
  <body>
    <button onclick="popup()">Popup</button>
  </body>
</html>

对应的popupreport.css放在同目录下即可生效：

h2 {color: red;}

• 引入资源的路径要和新窗口的上下文匹配，拿不准路径时可以用绝对路径（比如/css/popupreport.css）
• 如果逻辑依赖引入的JS，一定要监听script的load事件后再执行，避免JS未加载完成就调用方法报错
• 不要跨窗口上下文传递DOM节点，所有子窗口的节点都要用newWindow.document创建

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