如何使用JavaScript打开新窗口并正确渲染传入的HTML字符串

云原生阿岚

2026-10-1

问题根因

你的代码核心错误是调用new_window.document.write()时传入了DOM元素对象rendered_html，document.write()仅支持接收字符串类型的HTML内容，传入DOM对象会被自动转为[object HTMLDivElement]这类无意义的字符串，这就是你看到的异常渲染结果的原因。

修复方案

仅需要修改新窗口写入相关的两行代码即可：

传入DOM节点的完整HTML字符串而非DOM对象本身
写入完成后调用document.close()结束文档流，确保浏览器正常渲染
修改后的完整函数如下：

function render_html(){
      // was html rendered?
      if(!htmlRendered){
        textarea  = document.getElementById("generated_html_textarea");
        generated_html = textarea.value;
        console.log(generated_html);
        maincontentstyle = document.getElementById("maincontentstyle");
        rendered_html = document.createElement("div");
        rendered_html.setAttribute("id","rendered_html");
        rendered_html.setAttribute("style","border: 1px solid #EB0D1B; width: 360px; font-family: courier; font-size: 100.5%; margin: 0px auto; border: 1px; text-align: center; margin-top: 5px;");
        rendered_html.innerHTML +=  generated_html;
        rendered_html.innerHTML +='<span style="padding: 3px"> <button id ="one" class="button" type="button" onClick="show_answer()">Show Answer</button> <button id = "resetButton" class="button" type="button" onClick="reset()">Reset</button> </span>';
        maincontentstyle.appendChild(rendered_html);
        htmlRendered = true;
        var new_window = window.open('');
        console.log(rendered_html);
        // 修复点：传入HTML字符串，写入完成关闭文档流
        new_window.document.write(rendered_html.outerHTML);
        new_window.document.close();
      }
      update_jq_ui();
    }