Question

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

但是，我无法使用 templateElement.content （HTML5标准）访问其内容。相反，我使用jQuery通过选择器＆＃34; #templateElement div ＆＃34;来获取模板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也无法自动处理这个问题，因为模板＆＃34; innerHTML＆＃34;故意路由到内容，以便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模板标记：内容访问的后备

1 个答案: