Javascript HTML 5模板标记（页面刷新）_Javascript_Html_Html5 Template

Javascript HTML 5模板标记（页面刷新）

javascript html

Javascript HTML 5模板标记（页面刷新）,javascript,html,html5-template,Javascript,Html,Html5 Template,我想使用HTML5模板标记，但在页面刷新后出现了一些令人困惑的行为。也许我先向您展示一些代码： <!doctype html> <meta charset=utf-8> <title>HTML 5 - template test</title> <template> <h1>This is an awesome new HTML 5 template</h1> <p>.. some

我想使用HTML5模板标记，但在页面刷新后出现了一些令人困惑的行为。也许我先向您展示一些代码：

<!doctype html>
<meta charset=utf-8>
<title>HTML 5 - template test</title>

<template>
    <h1>This is an awesome new HTML 5 template</h1>
    <p>.. some even more awesome content .. some even more awesome content .. some even more awesome content .. some even more awesome content .. some even more awesome content</p>
</template>
<div></div>

<script>
var template = document.querySelector('template'),
    templateContent = template.content.cloneNode(true);

console.log(template);
console.log(templateContent);

document.querySelector('div').appendChild(templateContent);
</script>


HTML5-模板测试
这是一个很棒的新HTML5模板
。。一些甚至更棒的内容。。一些甚至更棒的内容。。一些甚至更棒的内容。。一些甚至更棒的内容。。一些甚至更棒的内容
var template=document.querySelector（'template'），
templateContent=template.content.cloneNode（true）；
控制台日志（模板）；
console.log（templateContent）；
document.querySelector（'div'）.appendChild（templateContent）；

事实上，这和预期的一样，但是控制台中有一些令人困惑的东西。当我第一次打开页面时，它会说：

但当我刷新页面时，它会显示以下内容：

当我重复一遍时，我又看到了第一张图片中的内容。我在jsbin上也尝试过，但在那里我看不到这种行为：

我真的不知道那里发生了什么。我使用的是谷歌Chrome 27.0.1453.110版（Windows）。

希望你能帮我解决这个问题。

这不是真正的模板相关，它是一个时髦的Chrome怪癖，有时会表现出来。在几乎不可能重现的情况下，它也会对其他元素标记执行相同的操作，但实际对象内容永远不会受到影响。它只是有时候抓取toString（）序列化，有时候抓取对象序列化

然而，正如Andbdrew所指出的，模板标记仍然是一个草稿元素，我们还没有决定它应该如何被用户正确使用或如何访问它们，因此考虑到示例代码如何使用它，我建议只使用

…

元素，并使用

document.querySelector（“script[type='text/template']”选择它);而不是使用实验元素=）
我无法用28.0.1500.29 m复制这个问题：使用JSFIDLE或jsbin，它的工作方式似乎不同，但可能用本地html文件试试，这真的很奇怪。这真的很有趣。如果您添加了
或
标记，并在主体加载时运行主脚本，那么问题就会消失。如果省略了
标记或body.onload
，问题又会出现：。这看起来像是一个Chrome bug。它可能与模板
标记的“草稿”状态有关。