Question

我已经看到有一些polyfill可以复制Internet Explorer中html5 <template>元素的使用，但它们似乎都是在激活之前最终隐藏模板标记的脚本。不幸的是，这并不能阻止IE呈现模板的内容。例如：

＆＃13;

var template = document.querySelector('#myTemplate');
var myNode = document.importNode(template.content, true);

//comment out the line below to de-activate the template.  
document.body.appendChild(myNode);

＆＃13;

<template id="myTemplate">
<h1>You should only see this when the template is activated</h1>
<script>alert('this alert should only be displayed when the template is activated.')</script>
</template>

＆＃13;

在IE中，即使模板内容未附加到document.body，也会显示警报。我知道示例代码并不完全适合IE，因为模板标记没有content属性，但是将该属性添加到元素并不会停止警报脚本运行

有没有办法让模板标签的内容对IE完全惰性，或者我只需要等到模板元素正确实现边缘？

更新（15年9月2日）：

正如minitech在评论中所说，看起来没有办法让标签的内容完全无效。作为替代方案，我正在考虑通过修改标记来抑制在解析时执行的任何代码。感觉就像一个丑陋的黑客，但它似乎现在工作。我在这里找到了原始的polyfill：http://jsfiddle.net/brianblakely/h3EmY/

标记：

<script>
    // Shim so we can style in IE6/7/8
    document.createElement('template');
</script>
<template id="example">
    <h1>This is template content.</h1>
    <p id="great">It's really great.</p>
    <script type="text/x-suppress">alert('hi')</script>
</template>
<div id="target">
    <p>This is regular old content.</p>
</div>

脚本：

/* POLYFILL */
(function templatePolyfill(d) {
    if('content' in d.createElement('template')) {
        return false;
    }
    var qPlates = d.getElementsByTagName('template'),
        plateLen = qPlates.length, elPlate, qContent, contentLen, docContent;
    for(var x=0; x<plateLen; ++x) {
        elPlate = qPlates[x];
        qContent = elPlate.childNodes;
        contentLen = qContent.length;
        docContent = d.createDocumentFragment();
        while(qContent[0]) {
            docContent.appendChild(qContent[0]);
        }
        elPlate.content = docContent;
    }
})(document);

/* EXAMPLE */
var elTemplate = document.getElementById('example').content.cloneNode(true),
    elTarget = document.getElementById('target');

//Comment out the line below to test if the script will run before template activation.
activateTemplate(elTarget, elTemplate);

/* Template Activation */
function activateTemplate(targetNode, sourceNode){
    var findScripts = sourceNode.querySelectorAll('script');

    for (var i = 0; i < findScripts.length; i++) {
        var testScript = findScripts[i];
        testScript.setAttribute("type", "text/javascript");
    }
    targetNode.appendChild(sourceNode);
}

的CSS：

template {
    display: none !important;
}

所以有人可以告诉我为什么我会愚蠢地使用这种方法来抑制脚本在模板标签中加载ie？谁能告诉我一个更好的方法呢？

这是我的jsfiddle。

http://jsfiddle.net/rqqvvaft/4/

如何在IE中制作模板标签？

0 个答案: