javascript - A-Frame appendChild 在 Firefox 中有效，但在 Chrome 中无效

Question

我正在尝试使用模板元素在 A 框架中动态创建新实体。辅助函数如下所示:

function htmlToElement(html) {
    const template = document.createElement('template');

    // Never return a text node of whitespace as the result.
    html = html.trim();

    template.innerHTML = html;
    return template.content.firstChild;
}

我这样使用它:

document.querySelector('a-scene').addEventListener('loaded', () => {
  const cube = htmlToElement('<a-box position="0 1 -2"></a-box>')

  document.querySelector('a-scene').appendChild(cube);
});

这在 Firefox 中效果很好，但在 Chrome 中该实体不会显示。如果用 document.querySelector('a-box') 之类的东西查看实体，则没有 object3D 属性，所以我不认为将元素附加到场景中正在 Chrome 上使用 A-Frame 注册元素。为了让它在 Chrome 中工作，我缺少什么？这是 pen .

谢谢!

Answer 1

innerHMTL 的模板行为可能会有所不同。您可以使用createContextualFragment。要转储 A 框架的原始 HTML，请执行以下操作:

el.appendChild(document.createRange().createContextualFragment(str));