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 相关文章推荐
Maps Javascript
Jan 22 Javascript
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
动态加载js、css的实例代码
May 26 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 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
基于mysql的论坛(1)
2006/10/09 PHP
PHP中for循环语句的几种变型
2006/11/26 PHP
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
PHP文件操作实例总结
2016/09/27 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
js动态引入的四种方法
2018/05/05 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
python中元类用法实例
2014/10/10 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
学生爱国演讲稿
2014/01/14 职场文书
开学典礼决心书
2014/03/11 职场文书
大学生创业计划书
2014/08/14 职场文书
致运动员的广播稿
2015/08/19 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang