0

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

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);
<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>

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

有什么方法可以使模板标签的内容对 IE 完全惰性，还是我只需要等到模板元素正确实现边缘？

更新（09/02/15）：

正如 minitech 在评论中所说，似乎没有办法使标签的内容在 ie 中完全惰性。作为替代方案，我正在研究通过修改标签来抑制在解析时将执行的任何代码。感觉就像一个丑陋的黑客，但它现在似乎工作。我在这里找到了原始的 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/

4

0 回答 0