排序Javascript无法与Internet Explorer一起使用

Question

我需要有关JavaScript代码的帮助，它似乎无法与Internet Explorer 8一起正常工作，在我开始调试它时给了我很多错误。 首先，它说Internet Explorer 8不支持object.keys和object.getOwnPropertyByNames，其次也不支持ClassList。 我的代码可以在Google Chrome和Firefox上正常运行，但是在Internet Explorer上崩溃。需要帮助。

---

现场小提琴

---

var dataSource = ({
    "Pen": ({
        "Parker": ({
                "P1": ({}),
                "P2": ({})
        }),
            "Cello": ({
                "C2": ({}),
                "C1": ({})
        })
    })
}),
    traverseObject = function (obj) {
        var ul = document.createElement("ul"),
            li;

        for (var prop in obj) {
            li = document.createElement("li");
            li.appendChild(document.createTextNode(prop));
            li.onclick = function(e) {
                e.currentTarget.classList.toggle("hidden");
                e.stopPropagation();
            }
            if (typeof obj[prop] == "object" && Object.keys(obj[prop]).length) {
                li.appendChild(traverseObject(obj[prop]));
            } else {
                li.classList.add("leaf");
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    },
    sortedObject = function (obj) {
        document.getElementById("dvList2").innerHTML = "";
        var ul = document.createElement("ul"),
            li;
        var keys = Object.keys(obj).sort();
        for (prop in keys) {
            li = document.createElement("li");
            li.appendChild(document.createTextNode(keys[prop]));
            li.onclick = function(e) {
                e.currentTarget.classList.toggle("hidden");
                e.stopPropagation();
            }

            if (typeof obj[keys[prop]] == "object" && Object.keys(obj[keys[prop]]).length) {
                li.appendChild(sortedObject(obj[keys[prop]]));
            } else {
                li.className += "leaf";
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    };
window.onload = function () {
    document.getElementById("dvList1").appendChild(traverseObject(dataSource));
    document.getElementById("hlGSL").onclick = function(){document.getElementById("dvList2").appendChild(sortedObject(dataSource));}


}

---

谢谢

Answer 1

在页面上添加一个polyfill，例如aight ：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <!--[if lt IE 9]>
    <script type="text/javascript" src="aight.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="YOUR OTHER SCRIPTS HERE"></script>
  </head>
  <body>
  ...
  <script type="text/javascript" src="MAYBE OTHER SCRIPTS HERE"></script>
  </body>
</html>

另一个问题是，您多次使用console.log ，除非打开了DevTools，否则在IE8中未定义。 您可能要删除这些行或在JS的顶部添加如下行：

if (!'console' in window) { console = { log: function(){} }; }

另请参阅： Internet Explorer的“控制台”是未定义的错误 。