0

簡単に言うと、<html>このようなタグでコード スニペットをレンダリングする方法

<div id="container">
   <div id="header_area"><tiles:insertAttribute name="header"  /></div>
   <div id="body_area"><tiles:insertAttribute name="body" /></div>
   <div id="sidebar_area"><tiles:insertAttribute name="sidebar" /></div>
   <div id="footer_area"><tiles:insertAttribute name="footer" /></div>
</div>

このコードを見つけましたが、すべてに終了タグを追加します/>

function encodePreElements() {
    var pre = document.getElementsByTagName('pre');
    for(var i = 0; i < pre.length; i++) {
        var encoded = htmlEncode(pre[i].innerHTML);
        pre[i].innerHTML = encoded;
    }
};

function htmlEncode(value) {
   var div = document.createElement('div');
   var text = document.createTextNode(value);
   div.appendChild(text);
   return div.innerHTML;
}

したがって、上記のコードは次のようになります

<div id="container">
    <div id="header_area"><tiles:insertattribute name="header"></tiles:insertattribute></div>
    <div id="body_area"><tiles:insertattribute name="body"></tiles:insertattribute></div>
    <div id="sidebar_area"><tiles:insertattribute name="sidebar"></tiles:insertattribute></div>
    <div id="footer_area"><tiles:insertattribute name="footer"></tiles:insertattribute></div>
</div>

.innerHTMLjavascript で正しくレンダリングされalertます。では、最初のようにコードスニペットをレンダリングするにはどうすればよいですか? このプロセスを行う簡単な方法は何ですか?

4

1 に答える 1

0

さて、あなたの質問では、最初に引用されたブロックが次の<pre>ように要素内に埋め込まれていると思います。 <pre> <div id="container"> ... </div> </pre>

そして、あなたはそれを次のように変換しようとしています： <pre> &lt;div ... </pre>

問題は、ページがロードされるときに、のコンテンツが<pre>DOMにロードされることです。の値を取得するとpre[i].innerHTML、DOMの状態を正確に表す値が返されますが、元のHTMLとは異なります。

ページで使用されている正確なHTMLを保持する場合は、ページを生成するときにそのHTMLをエンコードする必要があります。JavaScriptがコンテンツにアクセスできるようになるまでには、手遅れになります。元のHTMLはなくなり、残っているのはDOMコンテンツだけです。

于 2012-09-25T11:53:32.580 に答える