我可以在页面加载期间将文本加载到 html 中吗答案

【问题标题】：Could I load text into html during page load我可以在页面加载期间将文本加载到 html 中吗
【发布时间】：2025-11-25 16:40:01
【问题描述】：

我想知道在加载网页期间是否有任何方法可以加载其他文件。我正在尝试将 JavaScript 模板引擎集成到我的网站中，并希望将我的模板保存在外部文件中，并且不必异步加载这些模板，而是在页面中的某处指定所需的模板并使用它们的内容（这将已与网页一起加载）在 JavaScript 中。
有没有办法实现这样的功能？

【问题讨论】：

标签： javascript html ajax web template-engine

【解决方案1】：

在文档中同步加载其他 HTML 文件很困难。如果不是不可能的话。您必须加载返回 HTML 字符串或可能使用框架的 javascript 文件。

但许多模板语言允许您直接在 HTML 代码中定义模板，f.ex Handlebars：

<script id="entry-template" type="text/x-handlebars-template">
    template content
</script>

您还可以使用 Node 或其他后端语言从目录中提取模板并创建一个包含所有模板字符串的全局模板对象。

当我使用前端模板进行开发时，我在开发时使用单独的模板文件和 Ajax，然后我们有一个 node.js 脚本，它可以提取所有模板并将它们放在一个全局对象中，而不是放在主 HTML 请求中，以便更快地访问.

【讨论】：

是的，我担心会出现这种情况（无法同步加载其他文件）。不过，您使用 Ajax 加载模板包的方法是合理的，所以我会采用您的解决方案。

【解决方案2】：

您可以查看JSONP，这将允许您将它们作为脚本包含在内，这听起来更像您想要的：

// HTML
<script>
    var files = [];
    var cache = function(data) {
        files.push(data);
    });
</script>
<script src="external.js"></script>
// External File
cache("<content>")

【讨论】：

感谢您的贡献，马特。我肯定会研究这项技术，但现在我将采用 David 的方法，因为我至少可以在页面加载后立即加载所有内容，尽管不是异步的。

【解决方案3】：

是的，你可以用 jquery-ajax 在一两行内完成

使用 .load http://api.jquery.com/load/ 加载完整文件

$('#result').load('ajax/test.html');

或.html http://api.jquery.com/html/

【讨论】：

OP 声明“不必异步加载这些模板”。

【解决方案4】：

.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 有时会省略它们的引号。

More Help

【讨论】：