Question

简而言之，使用Dojo框架的脚本最终会在IE上产生不同的结果。

以下是展示问题的示例页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.3/dojo/dojo.js"></script>
<script type="text/javascript">

dojo.connect(document.body, "onload", function () {

    var d = dojo.query("div");
    var s = dojo.query("span");
    dojo.empty(d[0]);
    dojo.create("span", {innerHTML: s[0].innerHTML}, d[0]);

});

</script>
</head>
<body>
<div><span>foobar</span></div>
</body>
</html>

_{不要在jsFiddle上尝试它，这个特殊情况不会在那里重现。}

示例应输出foobar，但在IE上则不输出。

为什么会发生这种情况并且有办法实现呢？

Answer 1

经过一些挖掘和调试后，我设法将问题跟踪到Dojo的内部：

397.empty = has("ie") ? function(node) {
    node = dom.byId(node);
    for (var c; c = node.lastChild; ) {
        _397.destroy(c);
    }
} : function(node) {
    dom.byId(node).innerHTML = "";
};

_397.destroy = function destroy(node) {
    node = dom.byId(node);
    try {
        var doc = node.ownerDocument;
        if (!_3a2 || _3a3 != doc) {
            _3a2 = doc.createElement("div");
            _3a3 = doc;
        }
        _3a2.appendChild(node.parentNode ? node.parentNode.removeChild(node) : node);
        _3a2.innerHTML = "";
    } catch (e) {
    }
};

从上面的代码中可以看出，IE得到了一个特例，但不幸的是它在功能上并不相同 - 事情最终会有所不同。

不确定这是否是一个错误，但肯定是一个值得怀疑的功能。解决方法是在调用dojo.clone()之前在innerHTML上运行dojo.empty()：

var d = dojo.query("div");
var s = dojo.query("span");
var i = dojo.clone(s[0].innerHTML);
dojo.empty(d[0]);
dojo.create("span", {innerHTML: i}, d[0]);

为什么Dojo DOM函数最终会在IE上产生不同的结果？

1 个答案: