在Innerhtml中运行js脚本

<div>aaa<script type="text//javascript">alert('test');</script></div>
这样的一段HTML节点中包含了一些JS代码.如果想把这段放到一个DOM容器中.并且把里面的JS运行起来
这样问题就出现了.

首先:
$('fun').innerHTML = '<div>aaa<script type="text//javascript">alert(/'test/');</script><//div>';

这样写的话就有问题了.里面的JS是无法运行起来的

在做 ajax 编程时，我们常常需要将 xmlhttp 获取到的页面内容通过 innerHTML 来赋给某个容器（比如 div、span 或者 td 等），但是这里存在一个问题，就是我们将要赋给 innerHTML 的页面内容如果包含有脚本程序，这些脚本程序不管是外部脚本，还是内部脚本，可能⁽¹⁾都不会被执行。这个问题在某些时候微不足道，甚至可以忽略，但有些时候，这个问题就非常严重，它很可能让我们的程序得不到预期的结果。因此我们需要解决这个问题。

如果你读过 MSDN，你会发现并非所有插入到 innerHTML 中的脚本都不能执行，如果这段脚本的 script 标签中包含了 defer 属性，IE 会正确的执行这些脚本程序。但不幸的是，Moziila/Firefox 和 Opera 可不吃这一套，不管 script 标签有没有设置 defer 属性，这些浏览器都不会向 IE 那样去执行插入到 innerHTML 中的脚本。

但不管脚本是否被执行了，有一点我们可以肯定，那就是这些脚本确实被插入到了 innerHTML 中，如果不相信，你可以 alert 一下看看。但如果你真的 alert 了，你也可能会发现有一种例外情况存在，那就是如果脚本在 innerHTML 内容开头的话，那么 IE 浏览器将会忽略掉这段脚本，而 Moziila/Firefox 和 Opera 却不会。

下面给出一个简单的解决方法

 

var $ = function(o){
    return document.getElementById(o);
};
var fillHTML = function(el, HTMLString){
    if (!el)
        return;
    if (!+"/v1") {
        el.innerHTML = "<img style='display:none'/>" + HTMLString.replace(/<script([^>]*)>/ig, '<script$1 defer>');
        el.removeChild(el.firstChild)
    }
    else {
        var nSibling = el.nextSibling;
        var pNode = el.parentNode;
        pNode.removeChild(el);
        el.innerHTML = HTMLString;
        pNode.insertBefore(el, nSibling)
    }
}
function T(){
    fillHTML($('fun'), '<div>aaa<script type="text//javascript">alert(/'test/');<//script><//div>');
}

 

ps:这个方法只能运行本地脚本，如果运行跨域脚本就不适用了

例如    fillHTML($('channelname'), '<script type="text//javascript" src=2.js><//script>');可以运行

如果换为    fillHTML($('channelname'), '<script type="text//javascript" src=http://www.domain.com/2.js><//script>');

就无法显示