如何在Chrome浏览器独立标签页中渲染生成的HTML内容

直接通过window.open()接口创建空白新标签页，再将你组装好的完整HTML内容写入新标签页的文档对象即可，修改后的render_html()参考代码如下：

function render_html(){
  if(!htmlRendered){
    const textarea  = document.getElementById("generated_html_textarea");
    const generated_html = textarea.value;
    // 组装你要渲染的完整内容
    let renderContent = `
    <div id="rendered_html" 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;">
      ${generated_html}
      <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>
    </div>
    `;
    // 创建新标签页
    const newTab = window.open('', '_blank');
    // 写入内容到新标签页
    newTab.document.write(`
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>单词匹配游戏</title>
      <!-- 这里可以补你原页面用到的样式、JS依赖，比如.button的样式 -->
      <style>
        /* 把你原页面里.button类的样式复制到这里 */
      </style>
      <script>
        // 把你原页面的show_answer、reset、update_draggy_boxes方法复制到这里
        function show_answer(){/* 原逻辑 */}
        function reset(){/* 原逻辑 */}
        function update_draggy_boxes(){/* 原逻辑 */}
      </script>
    </head>
    <body>
      ${renderContent}
      <script>
        // 页面加载完成后执行初始化方法
        update_draggy_boxes();
      </script>
    </body>
    </html>
    `);
    newTab.document.close();
    htmlRendered = true;
  }
}

注意事项 #

• 新标签页不会默认继承原页面的样式和JS方法，必须把游戏功能依赖的所有样式、函数都同步写入新标签页的HTML结构中，否则按钮点击、拖拽等功能会失效。
• 如果浏览器触发了弹出窗拦截，需要引导用户手动允许当前站点的弹出窗权限。

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