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

我想知道在加载网页的过程中是否有任何方法可以加载其他文件。我正在尝试将JavaScript模板引擎集成到我的站点中，并希望将我的模板保存在外部文件中，而不必异步加载这些模板，而是在页面中的某个位置指定所需的模板，并在JavaScript中使用其内容（与网页一起加载）。

---

有什么方法可以实现这样的功能吗？

是的，您可以使用jquery ajax在一两行代码中实现它

---

用.Load加载完整文件

---

或.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有时会在属性值周围去掉引号

---

您可以查看

JSONP

，它允许您将它们作为脚本包含，听起来更像您想要的：

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

//HTML
var文件=[]；
变量缓存=函数（数据）{
文件推送（数据）；
});
//外部文件
缓存（“”）

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

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

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

模板内容

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

---

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

OP声明“不必异步加载这些模板”。是的，我担心会出现这种情况（无法同步加载其他文件）。不过，您使用Ajax加载模板包的方法是合理的，因此我将使用您的解决方案。感谢您的贡献，Matt。我肯定会研究这项技术，但现在我将采用David的方法，因为我至少有一种方法可以在页面加载之后立即加载所有内容，尽管不是异步加载。

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

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