IE11 bug - 调用 javascript getAttributeNode 方法会制动 mergeAttribu

IE11 bug - calling javascript getAttributeNode method brakes mergeAttributes

本文关键字：mergeAttribu 方法 getAttributeNode bug 调用 javascript IE11      更新时间：2023-09-26

最近在IE=7模式下更新IE（11.0.27）后，javasrcipt中有一些非常奇怪的行为，在以前的版本中，下面的脚本按预期工作（包括IE8-IE11.0.24）。

所以它是由调用 Element.getAttributeNode（'class'） 引起的，在对元素进行此调用后，如果您尝试将其属性与另一个元素合并，该元素将抛出错误（未指定错误） 元素.mergeAttributes 方法。

演示（仅当开发工具/控制台关闭并在当前 IE11 版本的 IE-7 模式下发生）：链接

问题：有没有办法避免这种情况，对于上述方法，是否有其他方法？问题是这两种方法被mootools和jquery选择器大量使用，而我的框架是基于mootools的。因此，在我使用看起来像$$（'input[class=randomclass]'）的选择器后，所有输入都将被截断，我将无法克隆它们（mergeAttributes）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<html>
<head>
    <script type='text/javascript'>
        window.onload = function() {
            org = document.getElementById('o');
            cln = document.getElementById('c');
            btn1 = function() {
                cln.mergeAttributes(org);
                alert(cln.className)
            }
            btn2 = function() {
                org.getAttributeNode('class');
                try {
                    cln.mergeAttributes(org);
                } catch (e) {
                    alert(e.description)
                }
            }
        }
    </script>
</head>
<body>

<div id='placeHolder'>
    Original:
    <input type='text' class='original' id='o'></input>
    <br> Clone:
    <input type='text' class='clone' id='c'></input>
    <br>
</div>
    <input type='button' value='mergeAttributes without "getAttributesNode" ' onclick='btn1()'>
    <br>
    <input type='button' value='mergeAttributes with "getAttributesNode" ' onclick='btn2()'>
    <br>
</body>
</html>

似乎问题出在jQuery库中。 此解决方案由 dataTabes 论坛的 cqrranthuohill3 提供。 他提到了 Dottoro.com

在 jquery 中.js在 cloneFixAttributes（ src， dest ） 函数中大约第 6092 行。 取代：

// mergeAttributes, in contrast, only merges back on the
// original attributes, not the events
if ( dest.mergeAttributes ) {
    dest.mergeAttributes( src );
}

跟：

   // mergeAttributes, in contrast, only merges back on the
   // original attributes, not the events
    try{
        if ( dest.mergeAttributes ) {
            dest.mergeAttributes( src );
        }
    } catch (exception) {
        for (var i=0; i < src.attributes.length; i++) {
            var attr = src.attributes[i];
            var attrName = attr.name.toLowerCase ();
            if (attrName != "id" && attrName != "name") {
                dest.setAttribute (attr.name, attr.value);
            }
        }
    }

试一试。

在一些建议之后，我设法解决了与 Element.getAttributeNode（'class'） 相关的问题，因为它正在破坏 Element.mergeAttributes（src），我不得不用自定义函数替换 mootools 中 Element.getAttributeNode 的所有实例。

替换默认 Element.getAttributeNode 的函数：

getAttributeNode_M = function(el, attr) {
    var AllAttribues = el.attributes;
    for (var i = 0; i < AllAttribues.length; i++) {
        if (el.attributes[i].name.toLowerCase() == attr.toLowerCase()) {
            return el.attributes[i];
        }
    }
    return false;
}
相关文章：