innerHTML动态拼接html,innerHTML动态添加html代码和脚本兼容多个浏览器
innerHTML动态添加html代码和脚本兼容多个浏览器
发布于 2017-02-04 10:36:56 | 94 次阅读 | 评论: 0 | 来源: 网友投递
JavaScript客户端脚本语言Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
innerHTML动态添加html代码和脚本,给某个元素的innerHTML赋值,并使得值中的js代码有效且兼容多个浏览器,很棒的一个方法
症状:给某个元素的 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 = '
' + htmlCode;
htmlCode = htmlCode.replace(/
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)
}
}
}
相关阅读:
innerHTML动态添加html代码和脚本兼容多个浏览器
javascript动态添加单元格的脚本代码
JavaScript动态添加css样式和script标签
用js动态添加html元素,以及属性的简单实例
js实现对table动态添加、删除和更新的方法
javascript 动态添加事件代码
使用js对select动态添加和删除OPTION示例代码
JS动态添加option和删除option(附实例代码)
JavaScript 动态添加脚本,并触发回调函数的实现代码
createElement动态创建HTML对象脚本代码
JS 通过系统时间限定动态添加 select option的实例代码
JS动态添加iframe的代码
innerHTML动态拼接html,innerHTML动态添加html代码和脚本兼容多个浏览器相关推荐
- jq 在元素中追加html代码,jquery添加html代码,怎样动态的添加一条html代码?
下面的文章内容要给大家介绍的就是jquery动态的添加html代码的内容,那么你知道应该如何添加吗?一起来看看方式吧. 添加新bai内容的4个jquery方法,分别是append() - 在被bai选 ...
- 给动态生成的id标签添加html,比较好玩的动态添加网页元素
比较好玩的动态添加网页元素 javascript 有一些很有趣的功能.下面介绍三样小功能. 1.动态创建按键 2动态创建链接 3动态创建表格 效果如下: 源代码如下: function btnClic ...
- jquery 中加入html代码,jquery实现动态添加html代码
先看下思导图,整体了解下,然后我们再来学习. 现在我们来看一下几段代码,然后根据这几段代码我们来学习一下如何正确的学习动态添加html. 一.html()方法 html函数的作用原理首先是移除目标元素 ...
- Java动态生成类以及动态添加属性 本篇文章来源于 Linux公社网站(www.linuxidc.c
2019独角兽企业重金招聘Python工程师标准>>> 有个技术实现需求:动态生成类,其中类中的属性来自参数对象中的全部属性以及来自参数对象propertities文件. 那么技术实 ...
- oracle数据库动态拼接查询条件解决方案
在项目中遇到需要动态拼接查询条件的需求,现将解决方案列于下. 一. select * from table t where ('$(param)' is null or t.filed = '$(pa ...
- sql动态拼接<if>标签嵌套<foreach>判空、if失效等问题
问题描述:在sql语句中使用<if>标签和<foreach>标签动态拼接,如下图: 由于已经使用双引号将<if>包起来了,在<if>标签中判断空字符串时 ...
- php如何拼接变量名,php动态拼接变量名,可变变量,动态变量,使用花括号,使用两个$符...
php动态拼接变量名,可变变量,动态变量,使用花括号,使用两个$符 方式一:使用花括号,前缀部分不需要用单引号 $nums10 = 100; $xxx*${bcount.$nums10}['m54'] ...
- [vue] 动态给vue的data添加一个新的属性时会发生什么?怎样解决?
[vue] 动态给vue的data添加一个新的属性时会发生什么?怎样解决? 如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.如果想要使添加的值做到响应式,应当使用$set()来添加对象. ...
- php中拼接html代码,如何利用ajax给html动态拼接代码
function get_all_category_with_id() { $.ajax( { type: "get", url: "../../../appUpload ...
最新文章
- Python中的凝聚层次聚类示例
- 科技边框_智能手机窄边框喷射点胶机欧力克斯
- 探讨BI可视化下的旅游大数据分析,你的钱都花哪了?
- a股用计算机模拟走势,咬牙跺脚!A股牛市不改的铁证!
- python自增_关于 python 的自增运算
- LeetCode2:Add Two Numbers
- 前端学习(2349):tabber的其他属性
- Python格式化输出--%s,%d,%f
- PHP课程设计《PHP网上购物系统的设计与实现》
- 360路由器v2刷第三方固件_斐讯K2P MTK版简单几步刷入breed教程,附刷第三方固件方法...
- DICOM医学图像简介
- ubuntu显示时间不正确的问题解决
- php根据手机号码获取归属地,PHP通过API获取手机号码归属地
- 直播答题哪家强:风口之下的产品运营体验
- 提问(小白问题):为什么这里调试的时候无法输入
- kubernetes安装脚本-非高可用版。一键安装含Master和Node。
- MIMO-OFDM无线通信技术及MATLAB实现(3)MIMO信道模型
- elasticsearch压力测试工具之ESrally使用说明
- 什么是TOR 官方文档
- 新手如何学习C语言?