html5 模板标签：内容访问的回退

Question

我在 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" 被特意路由到 content这样 DOM 就无法访问它（因此没有选择器会意外接触到它）。

Answer 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" )
//...

html5 模板标签：内容访问的回退

html5 template tag: fallback for content access

html

fallback

javafx-webengine

html5-template