关于innerHTML的一些问题

我正在转换一个在巴西创建的老程序员的笑话程序，类似于MIT's SCIgen，但使用艺术行话代替businnes乱码。由于该程序太旧（geocities时代老），当然它使用大量的document.write而不是innerHTHML。关于innerHTML的一些问题

第一个问题是，像innerTMLs内的吨代码放置是否安全？由于原来的程序加载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消息= “somecode” + “somecode” +

看起来安全到现在为止，但据我进入了转换，我该怎么有头痛或这种方法是直线前进因为它看起来像？

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

来源

2014-10-31 Fernando

我不会说这是不安全的，但它确实是一种非常糟糕的方式......为什么您需要使用JS来构建视图，为什么不使用HTML呢？（'--headeaches;'） – Vadorequest 2014-10-31 07:01:49

对不起，您使用html构建视图意味着什么？我想我是，现在我有点混乱，你能更具体一点吗？给我提示，我会做功课。 – Fernando 2014-10-31 07:25:38

那么你使用JS编写HTML，这不是最常见的。通常所有的html代码都在.html文件中。正如Sten在他的文章中写道的那样，这不是一个好主意！ – Vadorequest 2014-10-31 08:13:32

我的价值两分钱......

它是安全的地方，如innerHTMLs内部万吨代码？

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

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

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

最后，你需要iFrame吗？或新窗口？难道你不能简单地将“艺术行话”附加到当前html的底部吗？从而节省了iframe的头痛。

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

来源

2014-10-31 08:03:02

太棒了！从未这样做，我想知道人们如何管理内容和内联框架。将这些东西放在单独的文件中似乎是最好的选择，谢谢你的洞察力。 – Fernando 2014-10-31 16:09:02

关于innerHTML的一些问题

回答

相关问题