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 相关文章推荐
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
jQuery插件开发汇总
May 15 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 Javascript
微信小程序选择图片控件
Jan 19 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中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
python实现比较两段文本不同之处的方法
2015/05/30 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
python pandas 时间日期的处理实现
2019/07/30 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
大学生职业规划前言模板
2013/12/27 职场文书
工作证明格式及范本
2014/09/12 职场文书
小学运动会开幕词
2015/01/28 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
婚宴父母致辞
2015/07/27 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers