跨浏览器的设置innerHTML方法

很多人都可能遇到过这种情况：设置 innerHTML 的时候，插入的 HTML 代码中包含脚本，但这些脚本却不生效，或者在 IE 上生效在其它浏览器上就不生效。原因很简单：不同浏览器对插入 innerHTML 中的脚本有不同的处理方法。经过实践，归纳如下：

对于IE，首先 script 标签必须带 defer 属性，其次在插入时刻，innerHTML 的所属节点必须在 DOM 树中；对于 Firefox 和 Opera，在插入时刻，innerHTML 的所属节点不可以在 DOM 树中。

根据上面结论，给出通用的设置 innerHTML 方法：

/*
 * 描述：跨浏览器的设置 innerHTML 方法
 *       允许插入的 HTML 代码中包含 script 和 style
 * 作者：kenxu <ken@ajaxwing.com>
 * 日期：2006-06-26
 * 参数：
 *    el: 合法的 DOM 树中的节点
 *    htmlCode: 合法的 HTML 代码
 * 经测试的浏览器：ie5+, firefox1.5+, opera8.5+
 */
window.__el_stack = [];
var setInnerHTML = function (el, htmlCode) {
    window.__el_stack.push(el);
    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0) {
        htmlCode = '<div style="display:none">for IE</div>' + htmlCode;
        htmlCode = htmlCode.replace(/<script([^>]*)>/gi, '<script$1 defer>');
        el.innerHTML = htmlCode;
        el.removeChild(el.firstChild);
    } else {
        var el_next = el.nextSibling;
        var el_parent = el.parentNode;
        el_parent.removeChild(el);
        if (ua.indexOf('gecko') >= 0) {
            htmlCode += '<script>window.__el_stack.pop();<//script>';
        }
        el.innerHTML = htmlCode;
        if (el_next) {
            el_parent.insertBefore(el, el_next)
        } else {
            el_parent.appendChild(el);
        }
    }
    if (ua.indexOf('gecko') < 0) {
        window.__el_stack.pop();
    }
}
 
document.write = function() {
    if (window.__el_stack.length > 0) {
        var el = window.__el_stack[window.__el_stack.length - 1];
    } else {
        var el = document.getElementsByTagName('body')[0];
    }
    for (var i = 0; i < arguments.length; i++) {
        if (typeof arguments[i] == 'string') {
            var el2 = el.appendChild(document.createElement('div'));
            setInnerHTML(el2, arguments[i]);
        }
    }
}

在这篇文章编写之前，已经有一个比较完善的解决方法《让插入到 innerHTML 中的 script 跑起来》。比较起来，《让》给出的方法考虑得更细致，但处理起来比较繁琐，效率不高。而这里给出的方法则更简单，并且充分利用了浏览器的特性。