IE 9标准模式：normalize（）方法不起作用 [英] IE 9 Standards Mode: normalize() method does not work
问题描述
我正在测试一些东西而且我遇到了一个奇怪的错误（我不知道它是不是真的是一个bug）。
I was testing something and I came across a weird bug (I don't know if it's really a bug, although).
拿这个简单的文件
<!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中它是两次 - 这意味着 normalize（）没有做到这一点。更令人惊讶的是，如果我将文档模式更改为IE 7或8甚至是quirks模式，则控制台输出为3和1.
In all browsers but IE 9, the console output is first 3 then 1. In IE-9 it is 3 both times -- which means that normalize() is not doing it's thing. What's more surprising is that if I change the "Document mode" to IE 7 or 8 or even quirks mode, the console output is 3 and 1.
这是一些错误在IE或我出错了？
Is this some bug in IE or am I getting something wrong?
- 更新 -
-- UPDATE --
奇怪的是，如果元素未添加到DOM，IE 9也会以正确的方式运行。也就是说，在上面的代码中，如果我删除将段落添加到正文中的行：
Strangely, if the element is NOT added to the DOM, IE 9 also behaves in the right way. That is, in the above code, if I remove the line that adds the paragraph into the body:
document.body.appendChild(p);
然后，IE 9控制台还显示前3然后是1。
then, the IE 9 console also displays first 3 then 1.
- 更新2 -
-- UPDATE 2 --
一个简单的脚本来检查您的浏览器 normalize（）正确与否：
A simple script to check if your browser does normalize() properly or not:
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);
推荐答案
我在IE 11上遇到过这个问题，但在我之后尝试重置Internet Explorer设置，normalize（）表现正常。在任何情况下，我写了一个函数，如果IE被破坏，它会执行规范化。
I experienced this issue on IE 11, but after I tried "Reset Internet Explorer Settings", normalize() was behaving right. In any case, I wrote a function that does a "normalize" if IE is broken.
(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;
}
});
});
}
};
}());
这篇关于IE 9标准模式：normalize（）方法不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
