2012-10-19 5 views
3

뭔가를 테스트하고 있었는데 이상한 버그가있었습니다 (실제로 버그인지는 모르겠습니다). IE 9 표준 모드 : normalize() 메서드가 작동하지 않습니다.

이 간단한 문서

<!DOCTYPE html> 
<html><head><meta charset="utf-8"> 
<script> 
    window.onload = function() { 
     var p = document.createElement('p'); 

     p.appendChild(document.createTextNode('x')); 
     p.appendChild(document.createTextNode('y')); 
     p.appendChild(document.createTextNode('z')); 
     document.body.appendChild(p); 

     console.log(p.childNodes.length); 

     p.normalize(); 
     console.log(p.childNodes.length); 
}; 
</script></head><body></body></html> 

모든 브라우저

하지만 IE 9 걸릴 콘솔 출력에서 ​​다음 제 3 1이다 IE-9는 3 두 배 - normalize() 그런 의미 그것의 일을하지 않습니다. 더 놀라운 것은 "문서 모드"를 IE 7 또는 8 또는 심지어 버크 모드로 변경하면 콘솔 출력이 3과 1입니다.

IE에서이 버그가 있습니까?

- UPDATE가 - 요소가 DOM에 추가되지 않은 경우

이상하게도, IE 9는 올바른 방법으로 작동합니다. - UPDATE 다음

document.body.appendChild(p); 

는 IE 9 콘솔은 또한 처음 3 다음 1.

를 표시합니다 그건 내가 본문에 단락을 추가 라인을 제거하는 경우, 위의 코드에서, 2 - 브라우저가 normalize() 않는 경우

간단한 스크립트는 제대로 여부를 확인합니다 :

var p = document.createElement('p'); 

    // you can not put empty strings -- put blank strings instead 
    p.appendChild(document.createTextNode(' ')); 
    p.appendChild(document.createTextNode(' ')); 
    p.appendChild(document.createTextNode(' ')); 

    var normalizeOk; 

    document.body.appendChild(p); 
    p.normalize(); 
    normalizeOk = p.childNodes.length == 1; 
    document.body.removeChild(p); 


    console.log("normalize OK: ", normalizeOk); 

답변

3

IE 11에서이 문제가 발생했지만 "Internet Explorer 기본 설정 복원"을 시도한 후 normalize()가 올바르게 작동합니다. 어쨌든 IE가 깨진 경우 "정상화"를 수행하는 함수를 작성했습니다.

(function() { 
    function checkIfNormalizeOk() { 
     var p = document.createElement('p'); 

     // you can not put empty strings -- put blank strings instead 
     p.appendChild(document.createTextNode(' ')); 
     p.appendChild(document.createTextNode(' ')); 
     p.appendChild(document.createTextNode(' ')); 

     document.getElementsByTagName('head')[0].appendChild(p); 
     p.normalize(); 
     var isNormalizeOk = (p.childNodes.length === 1); 
     document.getElementsByTagName('head')[0].removeChild(p); 
     return isNormalizeOk; 
    } 

    function getNextNode(node, ancestor, isOpenTag) { 
     if (typeof isOpenTag === 'undefined') { 
      isOpenTag = true; 
     } 
     var next; 
     if (isOpenTag) { 
      next = node.firstChild; 
     } 
     next = next || node.nextSibling; 
     if (!next && node.parentNode && node.parentNode !== ancestor) { 
      return getNextNode(node.parentNode, ancestor, false); 
     } 
     return next; 
    } 

    var isNormalizeOk = checkIfNormalizeOk(); 
    window.normalizeEl = function (el) { 
     if (isNormalizeOk) { 
      el.normalize(); 
     } else { 
      var adjTextNodes = [], nodes, node = el; 
      while ((node = getNextNode(node, el))) { 
       if (node.nodeType === 3 && node.previousSibling && node.previousSibling.nodeType === 3) { 
        if (!nodes) { 
         nodes = [node.previousSibling]; 
        } 
        nodes.push(node); 
       } else if (nodes) { 
        adjTextNodes.push(nodes); 
        nodes = null; 
       } 
      } 

      adjTextNodes.forEach(function (nodes) { 
       var first; 
       nodes.forEach(function (node, i) { 
        if (i > 0) { 
         first.nodeValue += node.nodeValue; 
         node.parentNode.removeChild(node); 
        } else { 
         first = node; 
        } 
       }); 
      }); 
     } 
    }; 
}()); 
관련 문제