Question

我正在转换一个在巴西创建的老程序员的笑话程序，该程序与MIT's SCIgen类似，但使用艺术术语而非businnes乱码。

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

第一个问题是，在innerHTMLs中放置大量代码是否安全？由于原始程序加载了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是要走的路？

的 var message = 'somecode' + 'somecode' +

直到现在看起来都很安全，但就我进入转换而言，我是否会头痛或者这种方法看起来很直接？

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

Answer 1

我的两分钱......

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

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

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

接下来，将JS重构为一个单独的文件，启动缓存变量使代码更易于查看。

最后，你需要iFrame吗？还是一个新窗口？你不能简单地追加一下艺术术语＆＃34;到当前html的底部？从而节省了iframe的头痛。

我是非jQuery的完全倡导者，但也许你使用jQuery的HTML编辑API可能是一个好主意。可以帮助将一些问题抽象为更易读和可维护的形式。然后，香草JS真的很棒，如果可以这样做，它是一个很好的学习方式。

关于innerHTML的一些问题

1 个答案: