关于innerHTML的几个问题答案

【问题标题】：a few questions regarding innerHTML关于innerHTML的几个问题
【发布时间】：2014-10-31 06:35:24
【问题描述】：

我正在转换一个在巴西创建的老程序员的笑话程序，它与 MIT's SCIgen 类似，但使用艺术术语而不是商业胡言乱语。

由于程序太旧（geocities 时代），它当然使用大量 document.write 而不是 innerHTHML。

第一个问题是，在 innerHTML 中放置大量代码是否安全？由于原始程序加载了 4 组数组，其中包含可以组合成伪散文的每一个可能的文本，这是一段代码：

new_window.document.write("<body bgcolor=\"#000000\">");
new_window.document.write("<body text=\"#00FF00\">")
new_window.document.write("<p align=\"center\"><b>"+atitle+"</b><hr></p>");

firstshot = 1;
paragraph = 0;
while(lines > 0) {
    if (firstshot == 1) {
        if (lines % 101 == 0 && lines % 19 == 0) {
            new_window.document.write(tab0.chr(1,0)+tab0.chr(0,1)+tab3.chr(0,0)
.....
...

这继续在一英寸长的非嵌套代码块中，整个代码在这里http://jsfiddle.net/jmqdx09g/

我正在试验，这就是我目前得到的结果：

<body>
    <div id="target"></div>
    <div id = "myDiv"></div>
    <span id = "mySpan"></span>
    <br>

    <button id="restore">restore</button>
    <p>&nbsp;</p>
    <form name="form1" method="post" action="">
        <input type="submit" name="remove" id="remove" value="remove">
    </form>
    <p>&nbsp;</p>
</body>
<script type = "text/javascript">
    var message =      
        '<li><a href="../index.html">Home</a></li>'+
        '<li><a href="../about">About</a></li>'+
        '<li><a href="../contact/index.html">Contact</a></li>'+
        '<li><a href="../works/index.html">Works</a></li>'+
        ' <li><a href="../projects/index.html">Projects</a></li>'+
        '<li><a href="../curriculum/index.html">Curriculum</a></li>'

    var message2 =      
         '<div class="content">'+ 
         '<iframe src="/yourpage.html"  frameborder="0" width="600" height="650" scrolling="no">'+
         '<p>Your browser does not support iframes.</p>'+
         '</iframe></div>'

    document.getElementById("myDiv").innerHTML = message;  // use innerHTML for block and inline HTML elements
    document.getElementById("remove").addEventListener("click", function ()
    {
        document.getElementById("myDiv").innerHTML = message2;
    });

    document.getElementById("restore").addEventListener("click", function ()
    {
        document.getElementById("myDiv").innerHTML = message;
    });

它按预期工作，加载一些 html 内容，按下按钮，内容被 iframe 替换

iframe 是最好的解决方案还是用 js 替换整个 html 是要走的路？

变量消息 = '一些代码'+ '一些代码'+

到目前为止看起来很安全，但就我进行转换而言，我会感到头疼还是这种方法看起来很简单？

我应该使用 window.onload 而不是替换内容持有者 div 吗？

【问题讨论】：

我不会说它不安全，但这确实是一种糟糕的方式......为什么需要使用 JS 构建视图，为什么不用 HTML 代替？ (--headeaches;)
抱歉，您所说的使用 html 构建视图是什么意思？我说我是，我现在有点困惑，你能更具体一点吗？给我提示，我会做作业。
嗯，您正在使用 JS 编写 HTML，这不是最常见的。通常所有的 html 代码都在一个 .html 文件中。正如 Sten 在他的帖子中所写，这是不可维护的！

标签： javascript iframe innerhtml window.open document.write

【解决方案1】：

我的两分钱值...

在 innerHTML 中放置大量代码是否安全？

安全，是的...易于维护，不。前端代码是为客户端准备的，所以如果他们选择破解自己，让他们......当然，任何发送回服务器的东西都应该被清理并且不被信任，但这是一个完全不同的问题。

在我看来，最大的问题是可维护性。

接下来的JS，把这个重构成一个单独的文件，开始缓存变量让代码更容易看。

最后，您需要 iFrame 吗？还是新窗口？您不能简单地将“艺术术语”附加到当前 html 的底部吗？从而省去了 iframe 的麻烦。

我是非 jQuery 的完全拥护者，但也许对你来说使用 jQuery 的 HTML 编辑 API 可能是个好主意。可以帮助将一些问题抽象为更具可读性和可维护性的形式。话又说回来，vanilla JS 真的很棒，如果可以这样做，它是一种很好的学习方式。

【讨论】：

太棒了！从来没有走这条路，我想知道人们如何管理内容 wo iframe。将这些东西放在单独的文件中似乎是最好的方法，感谢您的洞察力。