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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
jquery三个关闭弹出层的小示例
Nov 05 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
jquery常用的12个小功能
Jul 22 Javascript
简单分析javascript中的函数
Sep 10 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
用js编写留言板
Mar 17 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
Prototype Date对象 学习
2009/07/12 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
简单谈谈python中的语句和语法
2017/08/10 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
pandas的排序和排名的具体使用
2019/07/31 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
大学生毕业自荐信
2013/10/10 职场文书
农民工创业典型事迹
2014/01/25 职场文书
学校课外活动总结
2014/05/08 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
协议书格式模板
2016/03/24 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB