html5模板标记:内容访问的后备

时间:2016-03-05 14:19:23

标签: html5 fallback javafx-webengine html5-template

我在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也无法自动处理这个问题,因为模板&#34; innerHTML&#34;故意路由到内容,以便DOM无法访问(因此没有选择器会意外触及它)。

1 个答案:

答案 0 :(得分: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" )
//...