我想知道在加载网页期间是否有任何方法可以加载其他文件。我正在尝试将 JavaScript 模板引擎集成到我的网站中,并希望将我的模板保存在外部文件中,并且不必异步加载这些模板,而是在页面中的某处指定所需的模板并使用它们的内容(这将已与网页一起加载)在 JavaScript 中。
有没有办法实现这样的功能?
4 回答
您可能会查看JSONP
哪些允许您将它们包含为听起来更像您想要的脚本:
// HTML
<script>
var files = [];
var cache = function(data) {
files.push(data);
});
</script>
<script src="external.js"></script>
// External File
cache("<content>")
沿着文档同步加载其他 HTML 文件是很困难的。如果不是不可能的话。您必须加载返回 HTML 字符串或可能使用框架的 javascript 文件。
但是许多模板语言允许您直接在 HTML 代码中定义模板,f.ex Handlebars:
<script id="entry-template" type="text/x-handlebars-template">
template content
</script>
您还可以使用 Node 或其他后端语言从目录中提取模板并创建一个包含所有模板字符串的全局模板对象。
当我使用前端模板进行开发时,我在开发时使用单独的模板文件和 Ajax,然后我们有一个 node.js 脚本,它可以提取所有模板并将它们放在一个全局对象中,而不是放在主 HTML 请求中,以便更快地访问。
是的,你可以用 jquery-ajax 在一两行中完成它
使用 .load http://api.jquery.com/load/加载完整文件
$('#result').load('ajax/test.html');
或 .html http://api.jquery.com/html/
.html()
此方法不适用于 XML 文档。
在 HTML 文档中,.html() 可用于获取任何元素的内容。如果选择器表达式匹配多个元素,则只有第一个匹配项才会返回其 HTML 内容。考虑这段代码:
$('div.demo-container').html();
为了检索以下内容,它必须是文档中第一个带有 class="demo-container" 的内容:
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>
结果将如下所示:
<div class="demo-box">Demonstration Box</div>
此方法使用浏览器的 innerHTML 属性。某些浏览器可能不会返回与原始文档中的 HTML 源完全相同的 HTML。例如,如果属性值仅包含字母数字字符,Internet Explorer 有时会省略属性值的引号。