IE11 bug - calling javascript getAttributeNode method brakes mergeAttributes

问题

There is some really strange behavior in javasrcipt after recent update of IE (11.0.27) in IE=7 mode, in previous versions script below works as expected (including IE8-IE11.0.24) .

So it's caused by calling Element.getAttributeNode('class') , after this call is made on element that element will throw error (Unspecified Error) if you'll try to merge it`s attributes with another element with Element.mergeAttributes method.

Demo (happens only when devtools/console is turned off and in IE-7 mode with current IE11 version) : LINK

Question: Is there any way to avoid this, and is there any alternative methods for those mentioned above? Issue is that those two methods are heavily used by mootools and jquery selectors and my framework is based on mootools. So after I use selector which looks like $$('input[class=randomclass]') all inputs will be corupted and i`ll not be able to clone them (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>

回答1:

It seems the issue is in the jQuery library. This solution was provided by cqrranthuohill3 from the dataTabes forum. He referenced Dottoro.com

In jquery.js in the cloneFixAttributes( src, dest ) function about line 6092. Replace:

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

With:

   // 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);
            }
        }
    }

Give that a go.

回答2:

After some suggestion i manage to fix the problem related to Element.getAttributeNode('class') as it was broking Element.mergeAttributes(src), i had to replace all instances of Element.getAttributeNode in mootools with custom function.

Function which replaced default 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;
}

来源：https://stackoverflow.com/questions/34946941/ie11-bug-calling-javascript-getattributenode-method-brakes-mergeattributes

标签

javascript

internet-explorer-11