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 firefox兼容ie的dom方法脚本
May 18 Javascript
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
Ionic2调用本地SQlite实例
Apr 22 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
JS实现div模块的截图并下载功能
Oct 17 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
JS实现滑动插件
Jan 15 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
实现“上一页”和“下一页按钮
2006/10/09 PHP
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
asp 取文本框名称代码
2008/12/02 Javascript
javascript GUID生成器实现代码
2009/10/31 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
关于vue面试题汇总
2018/03/20 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
python生成随机图形验证码详解
2017/11/08 Python
python实现字符串和字典的转换
2018/09/29 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
浅析Django中关于session的使用
2019/12/30 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
python中元组的用法整理
2020/06/15 Python
python之随机数函数的实现示例
2020/12/30 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
个人收入证明范本
2014/01/12 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
信息技术研修心得体会
2016/01/08 职场文书