淘宝详情页的 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>