innerHTML动态添加html代码和脚本兼容多个浏览器


Posted in Javascript onOctober 11, 2014

症状:给某个元素的 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 相关文章推荐
javascript 保存文件到本地实现方法
Nov 29 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
prototype.js简单实现ajax功能示例
Oct 18 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
AJAX学习笔记
May 18 Javascript
JS高级程序设计之class继承重点详解
Jul 07 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 #Javascript
JS 获取鼠标左右键的键值方法
Oct 11 #Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 #Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 #Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 #Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 #Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 #Javascript
You might like
php fckeditor 调用的函数
2009/06/21 PHP
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
python从入门到精通(DAY 2)
2015/12/20 Python
Python快速排序算法实例分析
2017/11/29 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
python yield关键词案例测试
2019/10/15 Python
python用700行代码实现http客户端
2021/01/14 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
给女儿的表扬信
2014/01/18 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
离婚案件上诉状
2015/05/23 职场文书
正规欠条模板
2015/07/03 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android
JavaScript流程控制(循环)
2021/12/06 Javascript