4

HTML 5 テンプレート タグを使用したかったのですが、ページの更新後に混乱する動作が発生します。たぶん、最初にいくつかのコードを示します。

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

実際、これは期待どおりに機能しますが、コンソールで混乱することがあります。最初にページを開くと、次のように表示されます。

http://i.stack.imgur.com/xDJBo.png

しかし、ページを更新すると、次のように表示されます。

http://i.stack.imgur.com/W23YF.png

それを繰り返すと、最初の写真のものが再び見えます。jsbin でも試してみましたが、この動作が見られません: http://jsbin.com/ofotah/1

そこで何が起こっているのか、まったくわかりません。Google Chrome バージョン 27.0.1453.110 (Windows)を使用しています。これで私を助けてくれることを願っています。

4

1 に答える 1

1

これは実際にはテンプレートに関連したものではなく、時々現れるファンキーな Chrome の癖です。事実上再現が不可能な条件下で他の要素タグに対して同じことを行いますが、実際のオブジェクトのコンテンツは決して影響を受けません. toString() のシリアル化を取得することもあれば、オブジェクトのシリアル化を取得することもあります。

ただし、Andbdrew が指摘しているように、テンプレート タグはまだドラフト要素であり、適切なユーザーであるべき方法やそれらにアクセスする方法についての決定にはほど遠いため、サンプル コードでの使用方法を考えると、お勧めします。代わりに要素を使用し、実験的な要素を使用するのではなく<script type="text/template">...</script>、要素を選択するだけです =)document.querySelector("script[type='text/template']");

于 2013-06-07T20:13:25.340 に答える