转自:http://be-evil.org/showlog-31.html
今天在项目开发中遇到的比较郁闷的问题,特此记录:
程序代码思路大致如下,想动态的改变tr标签的innerHTML内容,但是IE却报"未知的运行时错误",让我百思不得其解.
<script>
document.getElementById('trone').innerHTML = '<td>haha</td>';
</script>
<tr id=‘trone’>
</tr>
在网上一段查找获得以下解法:
在Ajax里经常会通过innerHTML来改变界面,这个比使用DOM要简单一些。
比如:
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.
innerTEXT与innerHTML的区别:
很多人都可能遇到过这种情况:设置 innerHTML 的时候,插入的 HTML 代码中包含脚本,但这些脚本却不生效,或者在 IE 上生效在其它浏览器上就不生效。原因很简单:不同浏览器对插入 innerHTML 中的脚本有不同的处理方法。经过实践,归纳如下:
对于IE,首先 script 标签必须带 defer 属性,其次在插入时刻,innerHTML 的所属节点必须在 DOM 树中;对于 Firefox 和 Opera,在插入时刻,innerHTML 的所属节点不可以在 DOM 树中。
根据上面结论,给出通用的设置 innerHTML 方法:
/*
* 描述:跨浏览器的设置 innerHTML 方法
* 允许插入的 HTML 代码中包含 script 和 style
* 作者:kenxu <ken@ajaxwing.com>
* 日期:2006-03-23
* 参数:
* 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 函数,避免在使用 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...
当在DIV中输入”a[任意个空格]a” HTML呈现在Chrome和IE下是一样的:只显示一个空格。 innerHTML属性 IE还是两个a加一个空格, Chrome则是原始输入的样子。 回车 当在DIV中输入”a[回车][任意个空格]a”时,HTML呈现...
首先时飘忽不定的collapse的border,ie6偏偏有一个地方与其他浏览器表现不同,一条丑陋的border不管怎么样都显示出来。无解。 上面的问题可以用诡异方法解决的话,那接下来就完全没有办法了。 由于涉及到了数据的...
发现IE下直接innerHTML的脚本无法执行. 尝试了几次发现,插入的HTML里,[removed]前面有其他对象,并且script 设置了 defer , 这样的脚本innerHTML被IE执行了. ,但是这招对于firefox不灵~~ 后来找了一些资料发现...
解压运行scripting.html,在IE6.0中打开(不能单独打开view.html这是一个子页面,必须由父页面调用)即可。 本javascript程序是我自己利用业余时间做的,主要是编写javascript进一步对其进行控制。 因为时间的关系只...
IE6-IE9中tbody的innerHTML不能赋值,重现代码如下 Js代码 <!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title>IE6-IE9中tbody的innerHTML不能复制bug</title> </...
显示innerHTML 和 outterHTML
innerHTML属性在原生javascript中被用于在一个标签内部加入HTML代码,但是这个方法也不是在所有情况下适用, 就比如在IE下面。 看如下代码: 复制代码代码如下: ’22’> </tbody> 我们现在想通过innerHTML属性给...
innerHTML的简单应用
前言: 这是一个老bug了,现在提供一个完美... bug描述: 在ie下面使用innerHTML来插入option选项的话,ie会去掉前面的,并拆分成多个节点,这样会造成select的出错,不是没有插进去,而是节点在转换时出问题了,微软对
今天做东西遇到一个问题,我试图动态为一个表格添加多行数据,先定义了一个table: 代码如下: <table> <thead> </thead> ”filelist”> </tbody> </table> 然后在JavaScript 中这样操作: 代码如下: for(var i in ...
最近发现各大类库都能利用xxx[removed]=HTML片断来生成节点元素,再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML,但是IE可恶的innerHTML把这优势变成劣势。
包括:11种用javascript做的刷新按钮的方法、40种Javascript中常用的使用小技巧、Javascript的IE和Firefox兼容性汇编、JavaScript函数大全、JavaScript实际应用:innerHTMl和确认提示的使用、 CSS的常用技巧、IP地址...
08.htm IE5。5的蓝链接,绿色下划线 09.htm innerHTML的运用:新建层 10.htm Javascript:测试打字速度 11.htm Javascript:测试点击速度 12.htm Javascript病毒入侵演示 ...... 共186个htm
innerHTML的使用document.getElementById("id").innerHTML = "contenttext";