1

我在 webkit 浏览器 (JavaFX WebView 2.2) 中使用模板标签来存储我可以克隆并附加到文档主要部分的元素。

但是，我无法使用templateElement.content（HTML5 标准）访问其内容。相反，我使用 jQuery 通过选择器“ #templateElement div ”获取模板 TAG 中的元素。

似乎还没有完全支持模板标签（内部脚本也运行），尽管它的内容没有呈现。

我担心的是，当模板标签得到支持时，获取其内容的方式会中断，我的页面将停止工作。

无论未来的实现发生变化，获取模板内容的推荐方法是什么？

HTML：

<template id="templateElement">
    <div>Clone Me!</div>
</template>

JavaScript：

function getContentsCurrent() {
    var toBeCloned = $("#templateElement div")[0];
    //append where needed...
}

function getContentsFuture() {
    var toBeCloned = templateElement.content.getElementsByTagName("div")[0];
    //append where needed...
}

编辑

我认为 jQuery 将无法自动处理这个问题，即使在未来也是如此，因为模板“innerHTML”被故意路由到内容，因此 DOM 无法访问它（因此没有选择器意外地触及它）。

4

1 回答 1

1

您可以测试该content功能之前是否存在：

function getContents() {
  var toBeCloned;
  if ( templateElement.content )
    toBeCloned = templateElement.content.getElementsByTagName("div")[0];
  else
    toBeCloned = templateElement.querySelector("div");
  //append where needed...
}

其他方式：

var content = templateElement.content || templateElement
var toBeCloned = content.querySelector( "div" )
//...
于 2016-03-05T15:24:01.410 回答