6

使用 html templates。在代码方面，很难为每个 html 文件保留正确的模板集。

是否可以有一个模板文件，就像一个文件一样css，包含在文件的head部分中html？

例如，为了补充 中的style部分head，可以链接到样式表，例如，

<link rel="stylesheet" type="text/css" href="mystyle.css" >

我的应用程序使用了几个templates. 可以像样式表一样处理它们，即链接到单独的文件中，还是每个template定义都需要直接成为原始html文件的一部分？

4

3 回答 3

8

想象一下，我们想在一个名为templates.html<template>的单独文件中导入一堆s 。

在（主）主页index.html中，我们可以通过 HTML Imports 导入文件：

<link rel="import" href="templates.html" id="templates">

在导入的文件templates.html中，根据需要添加一个或多个模板：

<template id="t1">
     <div>content for template 1</div>
</template>

<template id="t2">
     content for template 2
</template>

导入的文档可从元素的import属性中获得。<link>你可以querySelector在上面使用。

<script>
  //get the imported document in doc:
  var link = document.querySelector( 'link#templates' )
  var doc = link.import

  //fetch template2 1 and 2:
  var template1 = doc.querySelector( '#t1' )
  var template2 = doc.querySelector( '#t2' )
</script>

注意：您可以将上述脚本放在主文档中，也可以放在导入的文件中，因为<script>导入文件中的 s 会在解析后立即执行（在下载时）。

2020 更新

现在 HTML Imports 已被弃用，您可以使用它fetch()来下载 HTML 代码：

void async function () {
    //get the imported document in templates:
    var templates = document.createElement( 'template' )
    templates.innerHTML = await ( await fetch( 'templates.html' ) ).text()

    //fetch template2 1 and 2:
    var template1 = templates.content.querySelector( '#t1' ) 
    var template2 = templates.content.querySelector( '#t2' ) 
    console.log( template2 )
} ()
于 2016-10-05T11:35:47.390 回答
5

http://www.html5rocks.com/en/tutorials/webcomponents/imports/

你需要 HTML 5

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>
于 2015-11-17T04:45:45.540 回答
-1

很遗憾，

<头部>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

不起作用。_

整个作为 的一部分stuff.html被卡在那里，并且出于所有可行的目的而无法访问。htmlhead

换句话说，一个template defined instuff.html cannot be found usingdocument.querySelector()`，因此对脚本不可用。

fwiw，我真的不明白import它现在工作方式的任何优点 - 因为它需要在将内容附加到之前剥离（而不是添加）所有外部 html head- 而不是它当前的操作。

于 2016-01-02T09:32:38.053 回答