<template> 标签

<template> 元素，用于描述一个标准的以 DOM 为基础的方案来实现客户端模板。该模板允许你定义一段可以被转为 HTML 的标记，在页面加载时不生效，但可以在后续进行动态实例化。（它们是用来放置一大团 HTML 的地方，就是那些你不想让浏览器弄乱的标记...不管它是出于什么理由。）

特性检测

function supportsTemplate() {

return 'content' in document.createElement('template');

}

if (supportsTemplate()) {

// 检测通过！

} else {

// 使用旧的模板技术或库。

}

声明模板

</template>

那个空图片。这是故意留空的。因为页面加载时不会请求图片，因此就不会产生 404 或控制台错误。我们可以随后动态生成图片的 URL。

用 <template> 来包裹内容为我们提供了几个重要特性

1 它的内容在激活之前一直处于惰性状态。本质上，这些标记就是隐藏的 DOM，它们不会被渲染。

2 处于模板中的内容不会有副作用。脚本不会运行，图片不会加载，音频不会播放，...直到模板被使用。

3 内容不在文档中。在主页面使用 document.getElementById() 或 querySelector() 不会返回模板的子节点。

4 模板能够被放置在任何位置，包括 <head>，<body>，或 <frameset>，并且任何能够出现在以上元素中的内容都可以放到模板中。注意，"任何位置"意味着 <template> 能够安全的出现在 HTML 解析器不允许出现的位置...几乎可以作为任何内容模型的子节点。它也可以作为 <table> 或 <select> 的子元素：

<table>

<tr>

<td>some content</td>

</template>

</tr>

</table>

激活一个模板

要使用模板，你得先激活它。否则它的内容将永远无法渲染。激活模板最简单的方法就是使用 document.importNode() 对模板的 .content 进行深拷贝。 .content 为只读属性，关联一个包含模板内容的 DocumentFragment。

var t = document.querySelector('#mytemplate');

// 在运行时填充 src。

t.content.querySelector('img').src = 'logo.png';

var clone = document.importNode(t.content, true);

document.body.appendChild(clone);

在对模板进行冲压(stamping out)后，它的内容开始"启用"。在本例中，内容被拷贝，发出图片请求，最终的标记得以渲染。

http://www.html5rocks.com/zh/tutorials/webcomponents/template/

<template> 标签的更多相关文章

embed标签loop=true背景音乐无法循环
在html网页中加入背景音乐并设置为循环播放.一开始用<embed>标签,设置loop="true", 但是结果发现在IE浏览器可以,但是在chrome浏览器却无法实现 ...
【转】object标签和embed标签
我们现在大部分人做网页,都是直接用DW插入flash,而且DW也是所见即所得,直接生成了相应的flash显示代码.可是我们又有多少人了解这些直接由DW生成的代码呢?其实我接触flash player标 ...
embed标签的使用(在网页中播放各种音频视频的插件的使用)
播放器插件使用说明: 代码:< EMBED src=“music.mid”autostart=“true”loop=“2”width=“80”height=“30”> src:音乐文件的路 ...
as3.0 [Embed]标签嵌入外部资源
1.[Embed]嵌入资源 ActionScript代码的顺序非常重要.你必须在声明变量前添加[Embed]元数据标签,而且这个变量的类型会是Class; package { import flash ...
解决embed标签显示在div上层【转藏】
解决embed标签显示在div上层,非设置z-index 今天给屌炸了爆笑网增加了视频栏目,但是发现在IE8中,顶部浮动导航的div在移动到embed视频上时,总是被embed的flash文件盖住.分 ...
OBJECT和EMBED标签（转载）
一.介绍: 我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标签.也就是OBJECT和EMBED标签.OBJECT标签是用于windows平台的IE浏览器的,而EMBED ...
转: object 和embed 标签播放flash
一.介绍: 我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标签.也就是OBJECT和 EMBED标签.OBJECT标签是用于windows平台的IE浏览器的,而EMBE ...
OBJECT和EMBED标签
一.介绍: 我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标签.也就是OBJECT和EMBED标签.OBJECT标签是用于windows平台的IE浏览器的,而EMBED ...
HTML 5 <embed> 标签
定义和用法 <embed> 标签定义嵌入的内容,比如插件. 实例 <embed src="helloworld.swf" />
chrome不支持embed标签解决方案
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv=&quo ...

随机推荐

Quartz源码——QuartzSchedulerThread.run() 源码分析（三）
QuartzSchedulerThread.run()是主要处理任务的方法!下面进行分析,方便自己查看! 我都是分析的jobStore 方式为jdbc的SimpleTrigger!RAM的方式类似分析 ...
用matlab给图像加高斯噪声和椒盐噪声（不调用imnoise函数）
图像画面中的噪声,大致可以分为两类:高斯噪声和椒盐噪声.在这里,我们先看下图像中两种噪声各自的特征. 椒盐噪声:噪声幅值基本相同,但出现位置随机. 高斯噪声:图像中每一点都存在噪声,但幅值是随机分布的 ...
SiganlR 系列之概述
简介 SignalR 是微软的 http 长连接(以下简称长连接)框架,它的出现为我们提供了一套行之有效的实时通信的解决方案. 背景在http 1.0 时代,preRequest 都会建立新的tcp ...
ArcGIS RunTime SDK for Android之Features and graphics
今天是我开通博客园的第一天,希望以后可以多在博客园上分享自己的学习心得,记录自己的学习历程.最近在学习ArcGIS RunTime SDK for Android,所以第一篇随笔就从这里来吧.官网的教 ...
PIC24 通过USB在线升级 -- USB HID bootloader
了解bootloader的实现,请加QQ: 1273623966 (验证填bootloader):欢迎咨询或定制bootloader; 我的博客主页www.cnblogs.com/geekygeek ...
Fitnesse - Slim Tables
Fitnesse - Slim Tables 2017-09-28 目录1 什么是Wiki Word?2 Query Table 2.1 Query Table的格式 2.2 源代码3 Scri ...
基于SSM之Mybatis接口实现增删改查(CRUD)功能
国庆已过,要安心的学习了. SSM框架以前做过基本的了解,相比于ssh它更为优秀. 现基于JAVA应用程序用Mybatis接口简单的实现CRUD功能: 基本结构: (PS:其实这个就是用的Mapper ...
jq 通过标签属性匹配标签
有时候会有这样的需求在一堆的标签中定位到某个标签去获取值这时候我们就可以通过使用自定义属性将这一堆标签打上不同的标记通过属性定位标签了下面是代码: <input class=" ...
IEnumerable,ICollection,IList,List之间的区别
做C#的同学们,都知道,一类只能有一个继承类,但可以实现多个接口.这句话就告诉我们:IEnumerable,ICollection,IList,List区别了 // 摘要: // 公开枚举器,该枚举器 ...
Docker入门系列（一）：目标和安排
Docker入门系列(一) 这个系列的教程来源于docker的官方文档,此文档的目的在于一步一步学习docker的使用方法. 这一系列的教程有如下几篇文档: docker安装启动构建第一个docke ...

<template> 标签

<template> 标签的更多相关文章

随机推荐

热门专题