javascript - 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 开始修复了此问题: