动态添加js代码
  在页⾯中动态追加html⽚段的时候，有时候动态添加的代码会含有<script>标签，⽐如⽤了⼀些模板引擎，或者你的代码有些复杂的时候。然⽽我们⽤DOM提供的innerHTML⽅式来添加代码的时候，<script>标签中的代码并不能执⾏，如果有src属性，指向的外联⽂件也不会被加载，这并不是浏览器的bug，因为w3c⽂档就是这么规定的。
那我们有什么办法可以恢复追加的<script>标签的代码执⾏能⼒呢？
重新构造<script>标签
这个思路其实⾮常简单，⽤innerHTML添加的<script>⽆法执⾏，但是我们script创建节点，并⽤appendChild追加上去是可以的，所以我们只需要做⼀下⼆次⼯作就可以了，看下⾯的例⼦：
页⾯上有个容器：
<div id="cont"></div>
  js代码如下：
var html = '<div>html</div><script>alert(1);<\/script>';
var cont = ElementById('cont');
cont.innerHTML = html;
var oldScript = ElementsByTagName('script')[0];
var newScript = ateElement('script');
newScript.innerHTML = oldScript.innerHTML;
cont.appendChild(newScript);
  这只是内联<script>的⽅法，如果是引⽤的外部js⽂件，那么我们需要为新创建的script节点指定src属性。
eval⼤法
虽然eval因为其安全性不推荐使⽤，但是在此特殊场景，使⽤eval确是⾮常简单的解决⽅案，就是把<script>标签中的代码eval⼀下⼿动执⾏，就ok了，看下⾯代码：
var html = '<div>html</div><script>alert(1);<\/script>';
var cont = ElementById('cont');
cont.innerHTML = html;
var oldScript = ElementsByTagName('script')[0];
var scriptText = oldScript.innerHTML;
eval(scriptText);
  对于内联的代码，简单⽽有效，如果是外部js⽂件，那么还是使⽤上⾯的⽅法，为新创建的script节点指定src属性。
document.write⼤法
此⽅法可以在页⾯上直接输出任何html内容，包含<script>标签的话会⽴即执⾏，所以也是⼀种⽅案，如下：
var html = '<div>html</div><script>alert(1);<\/script>';
document.write(html);
  代码就直接执⾏了。但是他的缺点是如果代码写在⽂档底部，输出的内容会把页⾯上的其他内容全部覆盖，相当于清空了页⾯。解决的办法只有这样了：
<div id="cont"><script type="text/javascript">document.write(html);</script></div>
  直接把它放在标签中，就会往这个标签中输出东西了。
使⽤jQuery的html()
上⾯的⽅法说来说去，都不如jQuery简单，因为jQuery的html()⽅法内部已经做了处理，如果参数中含有<script>标签，内部会使⽤eval和创建新节点的⽅式进⾏处理，如果是外联的js⽂件，jQuery会发⼀个同步的ajax请求来获取代码，注意，是同步的！所以不论是内联的js代码还是外联的js⽂件，都可以正常执⾏，同时在执⾏完后删去<script>标签。所以，使⽤jQuery你只需要这样：
网站底部代码js特效var html = '<div>html</div><script>alert(1);<\/script>';
$('#cont').html(html);
  这个alert就妥妥的执⾏了。到这⾥，我真想说：jQuery，你真是俺亲娘！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。