让innerHtml中的script跑起来

最新推荐文章于 2021-06-05 02:34:03 发布

wmnmtm

最新推荐文章于 2021-06-05 02:34:03 发布

阅读量158

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wmnmtm/article/details/82923408

本文介绍了一种跨浏览器兼容的方法来设置innerHTML，确保插入的内容包括脚本和样式能在IE、Firefox和Opera等浏览器中正常工作。此外，还提供了解决HTML代码中包含document.write导致页面破坏的方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

/* * 描述：跨浏览器的设置 innerHTML 方法 * 允许插入的 HTML 代码中包含 script 和 style * 作者：kenxu <ken@ajaxwing.com> * 日期：2006-03-23 * 参数： * el: 合法的 DOM 树中的节点 * htmlCode: 合法的 HTML 代码 * 经测试的浏览器：ie5+, firefox1.5+, opera8.5+ */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; if (el_next) { el_parent.insertBefore(el, el_next) } else { el_parent.appendChild(el); } }}

还有某些情况，我们事先不清楚要插入到 innerHTML 的 HTML 代码包含什么，如果包含 document.write 语句，那么就会破坏整个页面。对于这种情况，可以通过重新定义 document.write 来避免。代码如下：

/* * 描述：通过重定义 document.write 函数，避免在使用 setInnerHTML 时， * 插入的 HTML 代码中包含 document.write ，导致原页面受到破坏的情况。 */document.write = function() { var body = document.getElementsByTagName('body')[0]; for (var i = 0; i < arguments.length; i++) { argument = arguments[i]; if (typeof argument == 'string') { var el = body.appendChild(document.createElement('div')); setInnerHTML(el, argument) } }}