背景：如果页面加载了iframe，在src不变的情况下，一般是不会重新载入iframe的内容的。
但如果在<template></template>内部使用了iframe，那每次激活<template>时，iframe就会重新加载。这本质上是<template>的特性。
介绍如下：
<template> 元素，用于描述一个标准的以 DOM 为基础的方案来实现客户端模板。该模板允许你定义一段可以被转为 HTML 的标记，在页面加载时不生效，但可以在后续进行动态实例化。（ 它们是用来放置一大团 HTML 的地方，就是那些你不想让浏览器弄乱的标记...不管它是出于什么理由。）
特性检测
function supportsTemplate() {
return 'content' in document.createElement('template');
}
if (supportsTemplate()) {
// 检测通过！
} else {
// 使用旧的模板技术或库。
}
声明模板
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
</template>
那个空图片。这是故意留空的。因为页面加载时不会请求图片，因此就不会产生 404 或控制台错误。我们可以随后动态生成图片的 URL。
用 <template> 来包裹内容为我们提供了几个重要特性
1 它的内容在激活之前一直处于惰性状态。本质上，这些标记就是隐藏的 DOM，它们不会被渲染。
2 处于模板中的内容不会有副作用。脚本不会运行，图片不会加载，音频不会播放，...直到模板被使用。
3 内容不在文档中。在主页面使用 document.getElementById() 或 querySelector() 不会返回模板的子节点。
4 模板能够被放置在任何位置，包括 <head>，<body>，或 <frameset>，并且任何能够出现在以上元素中的内容都可以放到模板中。 注意，"任何位置"意味着 <template> 能够安全的出现在 HTML 解析器不允许出现的位置...几乎可以作为任何内容模型的子节点。 它也可以作为 <table> 或 <select> 的子元素：
<table>
<tr>
<template id="cells-to-repeat">
<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)后，它的内容开始"启用"。 在本例中，内容被拷贝，发出图片请求，最终的标记得以渲染。
扫一扫
5925
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
