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

随机推荐

Css Html 大风车
<div style = "height:500px;width:500px;position:static;float:left;"><div class=&q ...
每周刷题记录--by noble_
学习hzwer的博客. ----------------------------------------------------------------- 2017.10.3 主要是水题与傻逼dp: ...
PHP常用数组(Array)函数整理
整理了一份PHP开发中数组操作大全,包含有数组操作的基本函数.数组的分段和填充.数组与栈.数组与列队.回调函数.排序.计算.其他的数组函数等. 一.数组操作的基本函数数组的键名和值 array_va ...
cannot be cast to javax.servlet.Servlet
在第一次开发Maven项目时,maven环境和仓库以及eclipse都和讲师讲解的一样,可是却遇到下面这个问题: java.lang.ClassCastException: servlet.UserS ...
MVC使用jQuery从视图向控制器传递Model,数据验证,MVC HTML辅助方法小结
//MVC HTML辅助类常用方法记录 (1)@Html.DisplayNameFor(model => model.Title)是显示列名, (2)@Html.DisplayFor(model ...
MVVM框架解析(一)
花了一点时间看了一下微软开源MVVM代码,受义很多! 从代码整体上看,代码分为四大类, 从图中看不能明白我要表达的意思.显而意见!MainApplicationWindow.xaml是应用程序主窗口( ...
jquery系列教程7-自定义jquery插件全解：对象函数、全局函数、选择器
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
【转载】CSS3 filter:drop-shadow滤镜与box-shadow区别应用
文章转载自张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...
面向接口编程实现不改代码实现Redis单机/集群之间的切换
开发中一般使用Redis单机,线上使用Redis集群,因此需要实现单机和集群之间的灵活切换 pom配置:  <dependency> < ...
[原创]浅谈JAVA在ACM中的应用
由于java里面有一些东西比c/c++方便(尤其是大数据高精度问题,备受广大ACMer欢迎),所以就可以灵活运用这三种来实现编程,下面是我自己在各种大牛那里总结了一些,同时加上自己平时遇到的一些jav ...

<template> 标签

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

随机推荐

热门专题