如何在 chrome 单独的选项卡中呈现 html答案

【问题标题】：How to Render html in a chrome separate tab如何在 chrome 单独的选项卡中呈现 html
【发布时间】：2021-11-22 17:59:29
【问题描述】：

在本例中，我想在单独的选项卡中显示在generate_html() 方法中生成的 html。

预期：显示一个新标签，显示渲染的 html 一个单词匹配游戏。

实际：我创建了一个渲染 html 的方法。我的程序处理一组表示单词匹配游戏的键和描述的输入。当用户单击 generate_html 时，将使用要生成的 html 创建一个 textarea。然后，当用户单击 Render html 时，textarea 中的 html 会在下面呈现。

function render_html(){
      // was html rendered?
      if(!htmlRendered){
        textarea  = document.getElementById("generated_html_textarea");
        generated_html = textarea.value;
        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;
      }
      update_draggy_boxes();
    }

新标签应该显示来自变量 rendered_html 的内容。

我正在寻找实现这一目标的方法。代码很简单。任何帮助将不胜感激。

【问题讨论】：

在选项卡之间传递数据需要查询、ajax 和服务器响应。 AFAIK 你不能用 javascript 做到这一点。
您可以使用window.open('')打开一个空窗口，然后设置它的HTML。

标签： javascript html

【解决方案1】：

查看最后几行。 window.open('') 有效。

function render_html(){
      // was html rendered?
      if(!htmlRendered){
        textarea  = document.getElementById("generated_html_textarea");
        generated_html = textarea.value;
        console.log(generated_html);
        var new_window = window.open('');
        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;
        header = '<!DOCTYPE HTML>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Word Matching Exercise</title>\n\t\t<style>\n*:focus {outline: 2px solid blue; outline-offset: 2px;}\n\t\tdetails {padding:3px;}\n\t\t</style>\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"boxes.css?v=9999\" />\n\t\t<script type=\"text/javascript\" src=\"event1.js?v=9999\">';
        header += '</'
        header += 'script>\n<script async src=\"https://www.googletagmanager.com/gtag/js?id=UA-89940905-27\">'
        header += '</'
        header += 'script>\n<script>\n\t window.dataLayer = window.dataLayer || [];\n\t function gtag(){dataLayer.push(arguments)};\tgtag(\"js\", new Date());\tgtag(\"config\", \"UA-89940905-27\");\n'
        header += '</'
        header += 'script>\n'
        header += '<script src="file:///D:/Sel.%20Topic%20in%20Csc/wordMatch/jquery-1.7.2.min.js">'
        header += '</'
        header += 'script>'
        header += '<script src="file:///D:/Sel.%20Topic%20in%20Csc/wordMatch/jquery-ui.min.js">'
        header += '</'
        header += 'script>'
        header += '<script src="file:///D:/Sel.%20Topic%20in%20Csc/wordMatch/jquery.ui.touch-punch.min.js">'
        header += '</'
        header += 'script>'
        header += '<script src="file:///D:/Sel.%20Topic%20in%20Csc/wordMatch/jquery.alerts.js">'
        header += '</'
        header += 'script>'
        header += '<link href="file:///D:/Sel.%20Topic%20in%20Csc/wordMatch/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen">'
        header += '<script type=\"text/javascript\" src=\"../logging.js\">'
        header += '</'
        header += 'script>\n</head>\n\t\t<body>';
        new_tab_html = header;
        new_tab_html += rendered_html.innerHTML;
        footer = '\n\t\t</body>\n</html>\n';
        footer += '<script type="text/javascript" src="file:///D:/Sel.%20Topic%20in%20Csc/wordMatch/GetElementPosition.3.js">'
        footer += '</'
        footer += 'script>'
        footer += '<script>audioOn = false; $(function() {$(\'.menulink\').click(function(){if (audioOn) {$("#bg").attr(\'src\',\"audioOff.png\");  audioOn = false;}else {$(\"#bg\").attr(\'src\',"audioOn.png");audioOn = true; speak(" ");}return false;});});'
        footer += '</'
        footer += 'script>'
        footer += '<img id="bg" src="audioOff.png" height="30" width="30" style="margin-bottom:-10px; padding-bottom:-20px;">'
        new_tab_html += footer;
        console.log(new_tab_html);
        new_window.document.write(new_tab_html);
      }
      update_jq_ui();
    }

【讨论】：