importNode和Microsoft Edge

Question

我有一个动态页面，使用条形按钮，我可以更改主div内容。 大多数页面都是静态的，除了包含JavaScript（RGraph图表）的页面。 这就是为什么为了使它工作我使用以下代码：

var data = new FormData();
data.append( 'action', 'charts' );
// clean the content
var myNode = document.getElementById("contentView");
while (myNode.firstChild)
{
    myNode.removeChild(myNode.firstChild);
}
// set the new content
var div = document.createElement("div");
var t = document.createElement('template');
t.innerHTML =  _connectToServer( data );
for (var i=0; i < t.content.childNodes.length; i++)
{
    var node = document.importNode(t.content.childNodes[i], true);
    div.appendChild(node);
}
document.getElementById("contentView").appendChild(div);

问题是，据我所知（并且我读过），这样的代码与Microsoft Edge不兼容，我也希望将它与Edge一起使用。

成功的最佳途径是什么？

Answer 1

好的，所以我把它交给我们的DOM团队来更好地理解这个互操作问题。

这实际上是每个规格的Chrome错误。当您创建模板元素并将innerHTML放在其中时，会发生什么情况，它被视为DocumentFragment。并且模板元素的内容不能具有可执行脚本。

以下是涉及此内容的相关规范链接：

• InnerHTML
• Template Element

要解决此问题，正如我之前指出的那样，您需要创建一个<script>元素，而不是<template>元素，并使用textContent。以下是此示例：http://jsbin.com/gizayuyape/edit?html,js,output

或者这是代码：

// Using textContent
var body = document.getElementsByTagName('body')[0];
var s = document.createElement('script');
s.textContent = 'document.write("Script textContent");';
body.appendChild(s);

至少在互操作方面，好消息是Chrome已从第67版开始修复此问题：