淘宝详情页的 BigRender 优化与存放大块 HTML 内容的最佳方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box1-data { visibility: hidden; } </style> </head> <body> <!-- 显示 代码 textarea内转义 < < &lt; < &lt; &amp;lt; & &amp; &amp;amp; --> <div id="box1"> <textarea id="box1-data"> <textarea></textarea> &lt; &amp;lt; &amp;amp; <p>缺点：</p> <ol> <li>服务端，要将 html 中的 &amp; 转义成 &amp;amp;</li> <li>服务端，要打破 ETAGO, 将 &lt;/textarea 转义成 &amp;lt;/textarea</li> </ol> </textarea> </div> <script> document.getElementById('box1').innerHTML = document.getElementById('box1-data').value </script> <div id="box2"> <script type="text/html" id="box2-data"> <p>缺点：</p> <ol> <li>服务端，要将 script 里 html 中的 </script 替换为某种特殊标记。</li> <li>浏览器端，得到 htmlCode 后，要将上面的特殊标记替换回原值。</li> </ol> </script> </div> <script> document.getElementById('box2').innerHTML = document.getElementById('box2-data').innerHTML </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script> // 不执行 document.getElementById('box1').innerHTML = '<script>alert(1)</script>' // 执行 jQuery 对 script 做了处理 $('#box2').html('<script>alert(2)</script>') function loadScriptString(code) { var script = document.createElement("script"); script.type = "text/javascript"; try { script.appendChild(document.createTextNode(code)); } catch (ex){ script.text = code; } document.getElementById('box3').appendChild(script) // document.body.appendChild(script); } loadScriptString("function sayHi(){alert('hi');}alert(3);") sayHi() </script> </body> </html>