javascript - 如何打开一个新窗口并编写html

问题描述

这个问题的目标是弄清楚如何打开一个新标签。然后在选项卡中渲染一串html。

预期：应该打开一个新窗口。然后来自变量 generated_html 的 html 应该显示在新窗口中。

实际：打开一个新窗口。html 字符串未正确呈现。

我创建了一个打开窗口并处理 html 字符串的函数。

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);
        new_window.document.write(rendered_html);
      }
      update_jq_ui();
    }

控制台日志打印出来

<div id="maincontentstyle">
    <center>
        <div id="boxstyle">
            <h3 id="h3style">T</h3>
                <center>
                    <div class="source">
                        <div id="s1" class="draggyBox-small ui-draggable">
                            k1
                        </div>
                        <div id="s2" class="draggyBox-small ui-draggable">
                            k2
                        </div>
                    </div>
                    </center>
                    <table id="tablestyle">
                        <tr>
                        <td id="row1">
                            <div id="t1" class="ltarget"></div>
                        </td >
                        <td id="d1">
                            d1
                            </td >
                        </tr>
                        <tr>
                        <td id="row2">
                            <div id="t2" class="ltarget"></div>
                        </td >
                        <td id="d2">
                            d2
                            </td >
                        </tr>
                    </table>
                </center>
        </div>
    </center>
</div>

标签： javascripthtml

javascript - 如何打开一个新窗口并编写html

问题描述

解决方案

推荐阅读