今天在项目开发中遇到的比较郁闷的问题,特此记录:
程序代码思路大致如下,想动态的改变tr标签的innerHTML内容,但是IE却报"未知的运行时错误",让我百思不得其解.
-
<script>
-
document.getElementById('trone').innerHTML = '<td>haha</td>';
-
</script>
-
-
<tr id=‘trone’>
- </tr>
<script>document.getElementById('trone').innerHTML = '<td>haha</td>';</script><tr id=‘trone’></tr>
在网上一段查找获得以下解法:
在Ajax里经常会通过innerHTML来改变界面,这个比使用DOM要简单一些。
比如:
- element.innerHTML = "<b>something</b>";
element.innerHTML = "<b>something</b>";
不过,在IE中,有时候会出现"未知的运行时错误(unknown
runtime error)",而在firefox里不会。
这主要是IE在对innerHTML进行写操作的时候会检查element是否具备做为这些内容中html对象容器的要求,比如如果你是在一个p里加入包含<li>的html代码,这是会出错的。所以如果你发现这些错误出现,尝试做两件事情:
1、检查你尝试加到innerHTML的html代码是否包含破损的html标签,如没有<ul></ul>包围的<li></li>.
2、把你的容器改成那些比较“包容”的标签,如<span></span>,<div></div>
特别注意的是<tbody>,<table>,<tr>标签里面加正确格式的<td>标签都有可能出错,所以应该避免使用这些标签作为容器,必要时可以用<td>作为容器,再嵌套一层表格。
跨浏览器的设置innerHTML方法
2006年11月06日 星期一 09:37 A.M.
Author:kenxu
innerTEXT与innerHTML的区别:
很多人都可能遇到过这种情况:设置
innerHTML 的时候,插入的 HTML
代码中包含脚本,但这些脚本却不生效,或者在 IE 上生效在其它浏览器上就不生效。原因很简单:不同浏览器对插入
innerHTML
中的脚本有不同的处理方法。经过实践,归纳如下:
对于IE,首先 script
标签必须带 defer 属性,其次在插入时刻,innerHTML 的所属节点必须在 DOM 树中;对于
Firefox 和 Opera,在插入时刻,innerHTML 的所属节点不可以在 DOM
树中。 根据上面结论,给出通用的设置
innerHTML 方法:
-
-
-
-
-
-
-
-
-
-
var setInnerHTML = 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);
-
}
-
}
- }
/* * 描述:跨浏览器的设置 innerHTML 方法 * 允许插入的 HTML 代码中包含 script 和 style * 参数: * el: 合法的 DOM 树中的节点 * htmlCode: 合法的 HTML 代码 * 经测试的浏览器:ie5+, firefox1.5+, opera8.5+ */var setInnerHTML = 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); } }}
还有某些情况,我们事先不清楚要插入到
innerHTML 的 HTML
代码包含什么,如果包含 document.write 语句,那么就会破坏整个页面。对于这种情况,可以通过重新定义
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'));
-
setInnerHTML(el, argument)
-
}
-
}
- }
/* * 描述:通过重定义 document.write 函数,避免在使用 setInnerHTML 时, * 插入的 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')); setInnerHTML(el, argument) } }}
在这篇文章编写之前,已经有一个比较完善的解决方法《让插入到
innerHTML 中的 script 跑起来
》。比较起来,《让》给出的方法考虑得更细致,但处理起来比较繁琐,效率不高。而这里给出的方法则更简单,并且充分利用了浏览器的特性。
分享到:
相关推荐
[removed] ”trone”> </tr> 在IE中,有时候会出现”未知的运行时错误(unknown runtime error)”,而在firefox里不会。 这主要是IE在对innerHTML进行写操作的时候会检查element是否具备做为这些内容中html对象容器的...
本文实例讲述了js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法。分享给大家供大家参考。具体分析如下: 问题描述: 网站中使用了一个js插件,设置innerHTML时,在IE8下报错“未知运行时错误”: ...
解决ajax返回innerHTML中javascript不能运行问题
原来出错的代码如下: 代码如下: <p xss=removed> ”txtContent” runat=”server” TextMode=”MultiLine” Height=”450″ Width=”98%”></asp> </p> 出错的原因应该是IE7、IE8中的P不支持innerHTML。CodeMirror...
发现IE下直接innerHTML的脚本无法执行. 尝试了几次发现,插入的HTML里,[removed]前面有其他对象,并且script 设置了 defer , 这样的脚本innerHTML被IE执行了. ,但是这招对于firefox不灵~~ 后来找了一些资料发现...
首先时飘忽不定的collapse的border,ie6偏偏有一个地方与其他浏览器表现不同,一条丑陋的border不管怎么样都显示出来。无解。 上面的问题可以用诡异方法解决的话,那接下来就完全没有办法了。 由于涉及到了数据的...
IE6-IE9中tbody的innerHTML不能赋值,重现代码如下 Js代码 <!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title>IE6-IE9中tbody的innerHTML不能复制bug</title> </...
innerHTML的简单应用
前言: 这是一个老bug了,现在提供一个完美... bug描述: 在ie下面使用innerHTML来插入option选项的话,ie会去掉前面的,并拆分成多个节点,这样会造成select的出错,不是没有插进去,而是节点在转换时出问题了,微软对
就比如在IE下面。 看如下代码: 复制代码代码如下: ’22’> </tbody> 我们现在想通过innerHTML属性给tbody中间加入等HTML代码,会这么做: 复制代码代码如下: <span xss=removed>document.getElementById(’22’...
最近发现各大类库都能利用xxx[removed]=HTML片断来生成节点元素,再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML,但是IE可恶的innerHTML把这优势变成劣势。
innerHTML的使用document.getElementById("id").innerHTML = "contenttext";
今天做东西遇到一个问题,我试图动态为一个表格添加多行数据,先定义了一个table: 代码如下: <table> <thead> </thead> ”filelist”> </tbody> </table> 然后在JavaScript 中这样操作... } 在FireFox 下这么干是没有
千锋Web前端教程_48_日期对象_定时器和innerhtml
博文链接:https://aideqianfang.iteye.com/blog/246585
//在IE下报错,目标对象错误 现在用jquery的html试试, 代码如下: $(tbody).html(‘<tr><td>IE下tbody的innerHTML是只读的</td></tr>’); 发现IE下用jquery能正确显示了,没任何问题。 后来查阅资料才知道,...
症状:给某个元素的 innerHTML 设置值时,如果提供的 HTML 代码中包含js脚本,很多时候这些脚本无效,或者在某种浏览器上有效,但在其它浏览器上无效。 原因:不同浏览器对插入 innerHTML 中的脚本有不同的处理方法...