跨浏览器的设置innerHTML方法,支持插入代码中包含script、style标签
Mar 23, 02:45 PM by kenxu
很多人在使用 innerHTML 插入代码的时候都会遇到这样一个问题:代码中包含的 script 不能运行。andot 的 让插入到 innerHTML 中的 script 跑起来 给出了一个很好的解决方案,考虑得很细致。这里给出另外一个更简单解决方案,充分利用了浏览器本身的特性。
/* * 描述:跨浏览器的设置innerHTML方法。 * 允许插入的html代码中包含script和style。 * 经测试的浏览器:ie5+, firefox1.5+, opera8.5+。 * 作者:kenxu <ken@ajaxwing.com> * 日期:2006-03-23 * 参数: * el: 合法的dom树中的节点。 * htmlCode: 合法的html代码。代码中可包含script和style。 * 注意:el必须是dom树中的节点!!! */ var setInnerHTML = function (el, htmlCode) { 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="true">'); el.innerHTML = htmlCode; el.removeChild(el.firstChild); } else { var el_next = el.nextSibling; var el_parent = el.parentNode; el_parent.removeChild(el); el.innerHTML = htmlCode; el_next ? el_parent.insertBefore(el, el_next) : el_parent.appendChild(el); } }