innerHTML动态添加html代码和脚本兼容多个浏览器
更新时间：2014年10月11日 17:42:01 投稿：whsnow
innerHTML动态添加html代码和脚本，给某个元素的innerHTML赋值,并使得值中的js代码有效且兼容多个浏览器，很棒的一个方法
症状：给某个元素的 innerHTML 设置值时，如果提供的 HTML 代码中包含js脚本，很多时候这些脚本无效，或者在某种浏览器上有效，但在其它浏览器上无效。
原因：不同浏览器对插入 innerHTML 中的脚本有不同的处理方法。经过实践，归纳如下：
对于IE，首先, script 标签必须带 defer 属性，其次,在插入时刻，innerHTML 的所属节点必须在 DOM 树中.
对于 Firefox 和Opera，在插入时刻，innerHTML 的所属节点不可以在 DOM 树中。
根据上面结论，给出通用的设置 innerHTML 方法:
复制代码 代码如下:
/*
* 描述：跨浏览器的设置 innerHTML 方法
* 允许插入的 HTML 代码中包含 script 和 style
* 参数：
* el: DOM 树中的节点，设置它的 innerHTML
* htmlCode: 插入的 HTML 代码
* 经测试的浏览器：ie5+, firefox1.5+, opera8.5+
*/
var set_innerHTML = 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);
}
}
上面的代码还有一个问题：如果插入的 HTML 代码中包含 document.write 语句，那么就会破坏整个页面。对于这种情况，可以通过重新定义 document.write 来避免。代码如下：
复制代码 代码如下:
/*
描述：重定义 document.write 函数.
避免在使用 set_innerHTML 时，插入的 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'));
set_innerHTML(el, argument)
}
}
}
您可能感兴趣的文章:
- javascript innerHTML、outerHTML、innerText、outerText的区别
- innerhtml用法 innertext用法 以及innerHTML与innertext的区别
- IE6-IE9不支持table.innerHTML的解决方法分享
- innerHTML与jquery里的html()区别介绍
- 放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
- js innerHTML 改变div内容的方法
- 调用innerHTML之后onclick失效问题的解决方法
- IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案
- js使用for循环与innerHTML获取选中tr下td值
- innerHTML中标签可以换行的方法汇总
相关文章
JavaScript使用ZeroClipboard操作剪切板
这篇文章主要为大家详细介绍了JavaScript使用ZeroClipboard操作剪切板的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
在 TypeScript 中，映射类型可以帮助我们避免编写重复的代码，它可以根据现有类型和定义的一些规则来创建新类型。本文我们就来看一下什么是映射类型以及如何构建自己的映射类型2022-08-08
这篇文章主要介绍了JavaScript将XML转成JSON的方法,实例分析了javascript操作XML文件及格式转化的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
项目需要写了一段模拟Scroll滚动代码，分享的同时，我有些疑问，希望大家能帮忙解决，代码如下2008-09-09
这篇文章主要介绍了javascript密码验证的实现方法，过程很简单具有一定的参考价值，适合初学者学习研究，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了JavaScript如何判断input数据类型,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了微信小程序开发之IOS和Android兼容的问题的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了微信小程序之左右布局的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要给大家介绍了关于微信小程序自定义scroll-view的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了小程序实现横向滑动日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
最新评论