个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
25
4
我正在为前端 HTML 模板寻找最符合标准/面向 future 的方法。
存在一个相对较新的 W3C draft specification for HTML Templates ，例如:
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
</template>
有谁知道有什么好的JavaScript polyfills已经存在制作<template>元素可以跨浏览器使用吗？最好符合这个标准。
根据HTML5Rocks guide这些模板具有以下属性:
<head> 、 <body> 或 <frameset> 内的任何位置”我认为完全使用 JavaScript polyfill 不可能实现所有这四个属性，因此任何解决方案都只是部分的。
最佳答案
Xotic750 提供了一个可靠的 polyfill，它通过改变 HTML 元素来工作——但如果以后有任何新模板添加到 DOM，它就会失败，并且越来越不鼓励改变(在可以避免的情况下)。
相反，我建议在您使用模板的地方引入“polyfill”行为。将此功能添加到您的 JS:
function templateContent(template) {
if("content" in document.createElement("template")) {
return document.importNode(template.content, true);
} else {
var fragment = document.createDocumentFragment();
var children = template.childNodes;
for (i = 0; i < children.length; i++) {
fragment.appendChild(children[i].cloneNode(true));
}
return fragment;
}
}
使用对模板元素的引用调用该函数。它将提取内容，并返回一个 documentFragment，然后您可以将其附加到另一个元素(或者对模板内容执行您可能想执行的任何其他操作)。像这样:
var template = document.querySelector("template#my-template");
var content = templateContent(template);
someElm.appendChild(content);
现在，其他答案没有提到它，但您可能需要一些 CSS 来隐藏 <template>元素。
template { display: none; }
这是一个 CodePen把它们放在一起。
现在，这将在 native 支持 <template> 的浏览器中正常工作元素，以及那些没有的元素。与另一个答案类似，它不是一个完美的 polyfill，因为它不会使模板呈现惰性(那会很复杂、缓慢且容易出错)。但它足以让我在生产中使用。
如果您有任何疑问或问题，请发表评论，我会相应地进行修改。
关于javascript - HTML 模板 JavaScript polyfill，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16055275/
25
4
0
https://github.com/Yaffle/EventSource 我使用上面的是因为我想获得在 IE11 中工作的 promise ，我已经用 npm 安装了它但不确定我应该如何实现它。我在
有没有办法“摇树”babel-polyfill，这样只有我使用的功能是 polyfill？ 也就是说，如果我从不在我的代码中使用 String.padStart，则不应包含它的 polyfill。 最
在我的入口点中使用 babel 转换将 babel-polyfill 导入到 Browserify 后，IE11 仍然提示 Object.assign。除了 Object.assign 之外，我的项目
这里是 Polyfill 新手。我对这个简单的例子完全感到困惑，在这个例子中我想初始化一个类型化数组: var x = new Uint8Array(3).fill(42); console.log(
我正在使用 ChildNode.remove()并且我由 Mozilla 描述我需要一个用于 IE 的 polyfill。我正在使用配置了 babel-polyfill 的 webpack: "ba
我正在使用 nuxt vuetify 模板构建一个静态站点，虽然它很棒并且提供了很多已经为我完成的配置和设置，但我发现很难让我的站点在 Internet Explorer (11) 上顺利运行。 由于
使用 core-js 填充的函数(例如，babel-polyfill)显示为原生。 Promise.race.toString() 产生: function race() { [native
我有以下实用程序: // Utility function to remove base64 URL prefix and store base64-encoded string in
我得到的错误 Error: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has b
我正在学习基于 React 的 Udemy 类(class)(这是 Brad Schiff 为我们其他人准备的 React 类(class) here)，我收到一个与 webpack 相关的错误，导致
我将 Ionic 3 项目升级为 Ionic 4 项目。使用“ionic serve”启动服务器时，我总是会收到上述错误。 我试过很多东西，例如: 在 polyfills.ts 文件中， (windo
我知道每个已知的浏览器都支持“decodeURIComponent”，但我试图通过 polyfill 来更好地理解它。 Atob、Btoa 有很多 polyfill……但出于某种原因，我没有找到任何用
我无法理解为什么检查对应于行 if (i in t) - 第 18 行放在 filter function polyfill 中: if (!Array.prototype.filter) { A
我正在尝试为传播运算符创建一个 polyfill。我的目标是创建类似于扩展运算符的东西，我可以使用三重 @@@ 符号代替三重点。 例如，在 ES6 中 function sum(x, y, z) {
This article启发我将我为 React 应用程序加载的 polyfill 外部化，并且只为需要它们的浏览器加载它们。一个简单的测试: function browserSupportsAllF
我创建了一个自托管 ServiceStack 服务，该服务基于其 showcase chat application 在 Windows 服务中运行。 。 但是，我没有进一步讨论的是尝试将客户端编写为
我正在开始一个新项目，目标是 MSVC、GCC(最新)、GCC 4.3 ARM 等等。我们构建的 waf 构建系统具有编译器的 C++11 功能检测。 我现在为 C++11 目标编译器中的所有功能提供
我正在寻找一种工具，它可以让我利用 native HTML5 拖放功能，并填充对过去浏览器的支持。 有这样的东西吗？ Modernizr 的页面 (https://github.com/Moderni
是否有一个 polyfill 来处理 Safari 4 (iOS) 和 IE 中的 CSS 背景大小调整 最佳答案 可以试试这个。 http://nooshu.com/jquery-plug-in-s
我正在构建一个我的目标群体非常普遍的网站(13 岁到 oo，所以你好 IE9，你好古老的 android 浏览器)，所以我需要 polyfills 来处理一些东西(viewport，calc 等)。在
我是一名优秀的程序员,十分优秀！