为什么在设置innerHTML时IE出现意外错误

时间:2020-03-06 14:57:08  来源:igfitidea点击:

我试图在firefox中的一个元素上设置innerHTML,并且效果很好,在IE中尝试了它,并且出现了意外错误,没有明显的原因。

例如,如果我们尝试将表的innerHTML设置为" hi from stu",则它将失败,因为表后必须跟随序列。

解决方案

我刚刚发现,如果我们尝试在IE中在逻辑上不正确的元素上设置innerHTML,则会抛出此错误。
例如,如果我们尝试将表的innerHTML设置为" hi from stu",则它将失败,因为该表必须后面跟随一个序列。
显然,Firefox不是那么挑剔。
希望能帮助到你。

"显然,firefox并不是很挑剔" ==>显然,FireFox是如此多虫,以至于它没有记录到这种明显的违反基本html嵌套规则的行为...

正如某人在另一个论坛上指出的那样,FireFox会接受我们将整个html文档添加为表单域或者图像的子元素,-(

我们是否尝试设置innerText和/或者textContent?当我们尝试在IE中更改其innerHTML时,某些节点(如SCRIPT标记)将无法按预期运行。这里有更多关于innerText和textContent的信息:

http://blog.coderlab.us/2006/04/18/the-textcontent-and-innertext-properties/

不知道我们为什么对Stu这个问题感到沮丧,因为这是我最近才解决的问题。诀窍是将HTML"喷射"到当前未添加到文档树的DOM元素中。这是执行此操作的代码段:

// removing the scripts to avoid any 'Permission Denied' errors in IE
var cleaned = html.replace(/<script(.|\s)*?\/script>/g, "");

// IE is stricter on malformed HTML injecting direct into DOM. By injecting into 
// an element that's not yet part of DOM it's more lenient and will clean it up.
if (jQuery.browser.msie)
{
    var tempElement = document.createElement("DIV");
    tempElement.innerHTML = cleaned;
    cleaned = tempElement.innerHTML;
    tempElement = null;
}
// now 'cleaned' is ready to use...

请注意,在此代码段中,我们仅使用jQuery来测试浏览器是否为IE,对jQuery没有硬性依赖。

我们是在设置完全不同的innerHTML还是替换innerHTML中的模式?我问是因为,如果我们尝试通过innerHTML的"功能"进行简单的搜索/替换,则会发现某些类型的元素无法在IE中播放。

可以通过以下方式来谨慎地纠正这一问题:将尝试放在尝试/捕获中,然后通过parentNode使DOM冒泡,直到成功完成此操作为止。

但是,如果我们要插入全新的内容,这将不合适。

检查我们要设置innerHTML的元素的范围。因为FF和IE以不同的方式处理此问题

我们正在看到这种行为,因为innerHTML对于IE中的表元素是只读的。从MSDN的innerHTML属性文档中:

The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

http://www.ericvasilik.com/2006/07/code-karma.html

我一直在与用不同的链接列表替换表中的链接列表的问题作斗争。如上所述,问题出在IE及其表元素的readonly属性上。

为我添加选项不是一个选择,所以我(最终)解决了此问题(适用于Ch,FF和IE 8.0(尚可以尝试其他方法,但我很希望))。

replaceInReadOnly(document.getElementById("links"), "<a href>........etc</a>");

function replaceInReadOnly(element, content){
    var newNode = document.createElement();
    newNode.innerHTML = content;
    var oldNode = element.firstChild;
    var output = element.replaceChild(newNode, oldNode);
}

为我工作,我希望它为我们工作