Question

我有一个Javascript单页面应用程序，里面有很多代码。

主要的想法是我的应用程序创建画布并在其中绘制各种东西基于各种数据。

每个画布都在div容器中。每个div容器还包含画布旁边的段落。

在Chrome和Firefox中一切正常，但在IE 11中出现了一些奇怪的事情：

容器div在附加到主文档后为空。我不明白为什么。

另一个奇怪的事情是，如果我通过在附加容器div的部分之后插入以下代码来破坏应用程序，那么画布和段落也会附加并且可见两个：

var foo = some_var; //where some_var is undefined

所以，代码很大，但这里有一个样本，只是为了提出一个想法：

A.js文件：

var paragraph = document.createElement("p");
var textnode = document.createTextNode("some text");
var div = document.createElement("div");
paragraph.appendChild(textnode);
div.appendChild(paragraph);
div.appendChild(canvas);

someOBJ.html = div;

B.js文件：

var parent2 = document.getElementById(parentId);
parent2.innerHTML = "";
parent2.style.width = '100%';

//someOBJs is an array of someOBJ from the A.js file
for(var i = 0; i < someOBJs.length; i++){
        parent2.appendChild(someOBJs[i].html);
}

如果我在这里插入我上面提到的破坏代码（使用未定义的东西），那么附加画布和段落，否则只附加div容器（someOBJs [i] .html）

Answer 1

可能与this bug关于IE中的$(document).on('turbolinks:load', function() { // code to be executed when use changes pages });有关。尝试使用removeChild清空div：

innerHTML = ""

另一方面，因为原因可能与性能有关：使用document fragment，您可以立即将所有节点附加到DOM而不是逐个：

while (parent2.lastChild) 
  elm.removeChild(parent2.lastChild);

IE11中的Javascript单页应用程序奇怪的行为

1 个答案: