HTML模板JavaScript填充

本文介绍了HTML模板JavaScript填充的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述限时删除！！我正在寻找最符合标准且面向未来的前端HTML模板方法。存在一个相对较新的 W3C HTML模板草案规范，例如： < template id =mytemplate> < img src =alt =great image> < div class =comment>< / div> < / template> 有谁知道是否有好的 JavaScript polyfills 已经存在，可以用于< template> 元素。跨浏览器的方式？最好符合这个标准。困难 HTML5Rocks指南这些模板具有以下属性：它的内容在激活之前是惰性的脚本不运行，图片无法加载，音频模板可以放在< head> ，< body> ，或< frameset> 我认为不可能纯粹用JavaScript填充来实现所有这四个属性，所以任何解决方案只能是部分。解决方案有一个 jsfiddle ，它演示了这种polyfill。 < script> // Shim让我们可以在IE6 / 7/8 document.createElement（'template'）; < / script> < template id =example> < h1> 这是模板内容。 < / h1> < p> 这真的很棒。 < / p> < / template> < div id =target> < p> 这是普通的旧内容。 < / p> < / div> / * POLYFILL * / （函数templatePolyfill（d）{ if（d.createElement（'template'）中的'content'）{返回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）; / *例子* / var elExample = document.getElementById（'example'）， elTarget = document.getElementById（'target'）; elTarget.appendChild（elExample.content.cloneNode（true））; 至于图书馆，我不知道他们支持它，但可以尝试像和 Initializr I'm looking for the most standards-compliant / future-proof method for front-end HTML templating.There exists a relatively new W3C draft specification for HTML Templates, e.g.:<template id="mytemplate"> <img src="" alt="great image"> <div class="comment"></div></template>Does anyone know if any good JavaScript polyfills already exist to make <template> element usable in a cross-browser way? Preferably complying with this standard.DifficultiesAccording the the HTML5Rocks guide these templates have the following properties:"Its content is effectively inert until activated""Script doesn't run, images don't load, audio doesn't play,""Content is considered not to be in the document""Templates can be placed anywhere inside of <head>, <body>, or <frameset>"I think it is impossible to implement all four of these properties purely with a JavaScript polyfill, so any solution would only be partial. 解决方案 There is a jsfiddle that demonstrates such a polyfill.<script> // Shim so we can style in IE6/7/8 document.createElement('template');</script><template id="example"> <h1> This is template content. </h1> <p> It's really great. </p></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 elExample = document.getElementById('example'), elTarget = document.getElementById('target');elTarget.appendChild(elExample.content.cloneNode(true));As for libraries, and I don't know that they support it yet, but try something like Modernizr and Initializr 这篇关于HTML模板JavaScript填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 1403页，肝出来的..