<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 ...

随机推荐

Linux 安装Anaconda 4.4.0
安装步骤参考了官网的说明:https://docs.anaconda.com/anaconda/install/linux.html 具体步骤如下: 1.在官网下载地址 https://www.an ...
ArrayListd的长度问题
namespace ArrayListd的长度问题{ class Program { static void Main(string[] args) { //需要的参数是object类型 //alt+ ...
第6章 Overlapped I/O，在你身后变戏法 ---1
这一章描述如何使用 overlapped I/O(也就是 asynchronous I/O).某些时候 overlapped I/O 可以取代多线程的功用.然而,overlapped I/O 加上co ...
通过express搭建自己的服务器
前言为了模拟项目上线,我们就需要一个服务器去提供API给我们调用数据.这次我采用express框架去写API接口.所有请求都是通过ajax请求去请求服务器来返回数据.第一次用node写后端,基本就是 ...
POJ 2359 Questions(约瑟夫环——数学解法)
题目链接: http://poj.org/problem?id=2359 题意描述: 输入一个字符串按照下面的规则,如果剩下的最后一个字符是'?',输出"Yes",如果剩下的最后 ...
java 虚拟机与并发处理几个问题简要(二)
六.两个重要的概念性问题: 1.同步:要保持数据的一致性,就需要一种保证并发进程正确执行顺序的机制.这种机制就是进程同步(Process Synchronization). 竞争资源的多个进程按着特 ...
git-分支使用方式
需求场景:假如你看着教程完成了一个项目,但是感觉第一次代码掌握不牢,想要进行第二次代码练习--如果某某心里想我还有初始备份文件,我此时的心里独白是你的硬盘还够用吗o(╯□╰)o 1 创建一个新分支 - ...
codesmith连接Mysql提示“找不到请求的 .Net Framework Data Provider。可能没有安装。"
1,首先需要将MySql.Data.dll复制到codesmith安装目录下bin文件夹下,注意dll的版本 2,其次因为codesmith7采用的是.net4.0的配置文件,(64位系统)找到C:\ ...
Jquery使用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery使用mousee ...
Qt+VS2015应用程序发布
本文以Qt 5.9.1+VS2015编译环境为例介绍应用程序发布流程,也适用于Qt+mingw的情况. 1. Qt依赖库将需要发布的exe(如test.exe),放到单独的目录. 在"开始 ...

<template> 标签

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

随机推荐

热门专题