關於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的一些問題

回答

相關問題