2

つまり、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 では出力されません。

なぜこれが起こるのですか？それを回避する方法はありますか？

4

1 に答える 1

2

掘り下げてデバッグした後、問題を 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()することです:innerHTMLdojo.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]);
于 2012-11-27T11:10:38.260 に答える