跨浏览器的设置innerHTML方法分享
发布时间：2023-05-06 13:50:49 所属栏目：教程 来源：
导读：很多人都可能遇到过这种情况：设置 innerHTML 的时候，插入的 HTML 代码中包含脚本，但这些脚本却不生效，或者在 IE 上生效在其它浏览器上就不生效。原因很简单：不同浏览器对插入 innerHTML 中的脚本有不同的处理方
|
很多人都可能遇到过这种情况：设置 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) } } } 在这篇文章编写之前，已经有一个比较完善的解决方法《让插入到 innerHTML 中的 script 跑起来》。比较起来，《让》给出的方法考虑得更细致，但处理起来比较繁琐，效率不高。而这里给出的方法则更简单，并且充分利用了浏览器的特性。 （编辑：聊城站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
