H5的template标签和草案中的rel="import"

本文链接：https://blog.csdn.net/Cceking/article/details/81292924

本文介绍了HTML5的template标签，它用于保存客户端内容，内容在页面加载时不渲染，但在运行时可用JavaScript实例化。文章还讨论了HTML草案中的rel='import'，用于导入外部HTML资源，实现模板的复用。通过示例代码，解释了如何操作template内容以及处理导入的资源，并提到了低版本Chrome的跨域设置问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无关的mark：Chrome浏览器的控制台提供了$(selector)和$$(selector)，分别是querySelector() 和 querySelectorAll的一个快速的替代，这和jquery无关，所以诸如jquery.parent()啥的是用不了的。

H5的template标签

想不到H5这么强大，和angular里面的ng-repeat的效果是类似的已经支持了（类似，就是没有数据绑定，不过也可以模拟），那就是<template>。

HTML <template>元素 是一种用于保存客户端内容的机制，该内容在页面加载时不被渲染，但可以在运行时使用JavaScript进行实例化。

可以将一个模板视为正在被存储以供随后在文档中使用的一个内容片段。

虽然, 在加载页面的同时,解析器确实处理元素的内容，这样做只是确保这些内容是有效的; 然而,元素的内容不会被渲染。

参考MDN，先运行以下代码

<html>
<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- 现有数据可以可选地包括在这里 -->
    <template id="productrow">
      <tr>
        <td class="record"></td>
        <td></td>
      </tr>
    </template>
  </tbody>
</table>
</html>

可以看到重复的部分用#document-fragment标记了
这里写图片描述

直接在console运行以下代码，添加数据

// 通过检查来测试浏览器是否支持HTML模板元素 
// 用于保存模板元素的内容属性。
if ('content' in document.createElement('template')) {

  // 使用现有的HTML tbody实例化表和该行与模板
  let t = document.querySelector('#productrow'),
  td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // 克隆新行并将其插入表中
  let tb = document.getElementsByTagName("tbody");
  let clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);

  // 创建一个新行
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // 克隆新行并将其插入表中
  let clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);

}

这里写图片描述

注意：要操作template里面的dom，不能直接用template，要通过template.content 才行。

导入html文件rel=”import”

那想将template部分保存为一个文件，方便复用要怎么呢？

实际上在WebComponents草案中，引入了rel="import"的LINK标签，这是用于载入外部HTML资源的，可以解决上面的问题。

如下代码，参考自HTML Imports。

1.需要导入template保存为file.html，代码如下

<div class="warning">
  <style>
    h3 {
      color: red !important;
    }
  </style>
  <h3>Warning!</h3>
  <p>This page is under construction</p>
</div>

<div class="outdated">
  <h3>Heads up!</h3>
  <p>This content may be out of date</p>
</div>

2.将file.html引入main.html，可通过在<head>添加<link rel="import" href="import.html" >，又或者通过JS将file.html引入main.html

if ('import' in document.createElement('link')) {
    //
    var link = document.createElement('link');
    link.rel = 'import';
    link.href = 'file.html';
    //link.setAttribute('async', ''); // 异步
    //link.onload = function(e) {};
    //link.onerror = function(e) {};
    document.head.appendChild(link);
}

通过<link> 引入的template可以看到#document-fragment在<link>的内部。
这里写图片描述

3.然后就是将template的内容添加到dom上。

if ('content' in document.createElement('template')) {
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;
    // Grab DOM from warning.html's document.
    var el = content.querySelector('.warning');
    document.body.appendChild(el.cloneNode(true));
}

4.往template里面添加数据，这一步就是正常操作<template>。

注意：要操作import里面的dom，要通过link.import才行。

低版本的chrome需要通过chrome://flags/开启该特性才能运行。

Access to Imported resource at ‘file:///C:/Users/TR/Desktop/import.html’ from origin ‘null’ has been blocked by CORS policy: Invalid response. Origin ‘null’ is therefore not allowed access.

如果要在本地运行时，需要允许跨域访问，参考chrome浏览器的跨域设置——包括版本49前后两种设置。

1.在电脑上新建一个目录，例如：C:\MyChromeDevUserData

2.在属性页面中的目标输入框里加上 –disable-web-security –user-data-dir=C:\MyChromeDevUserData，–user-data-dir的值就是刚才新建的目录。

3.点击应用和确定后关闭属性页面，并打开chrome浏览器。