在Javascript中包含HTML文件

Including HTML file in Javascript

本文关键字：HTML 文件 包含 Javascript      更新时间：2023-09-26

我知道这是一个已解决的问题，这个问题可能听起来很愚蠢，但我主要从事后端、移动和低级开发背景。

我正在做一个JS应用程序(纯JS，没有框架，但结构很好)。该应用程序的唯一问题是所有HTML都是用Javascript编写的。所以它看起来像:

$div = ('<div>Hello</div>');

然后你可以想象所有的添加和HTML操作会有多难看。现在，这个HTML最终被包含到index.html文件中，该文件具有标准布局，所有其他JS文件最终将以某种方式导出HTML(使用一些PHP)。我希望能够创建一个单独的HTML文件，并有一个JS文件使用该文件。我该怎么做呢?我知道典型的问题是另一种方式:在HTML中，获得JS/模板。但在这个应用程序的情况下，这不是问题。

与当前的应用程序我有，是否有一种方法来使用把手或下划线，或任何类似的，能够在HTML文件中编写HTML，只是将其包含到Javascript?我知道这可能需要一些预编译，但这不是问题。

下划线和手柄的例子只显示了简单的HTML例子，我有上面的方式。网上的例子显示了如何用Javascript模板HTML，但不完全是我想要的。

谁有任何建议或可以帮助吗?

我认为您可以使用JQuery的$.ajax()方法轻松地做到这一点。下面是一个例子:

$.ajax({
    type: "GET",
    url: "/templates/something.html",
    dataType: "xml",
    success: function (xml) {
        $div = xml;
        console.log('Loaded HTML: ', xml);
    }
});

车把将工作为你想做的，它是超级简单的使用!

让我们举一个简单的例子(取自车把网站)。假设这是你的HTML:

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

你所要做的就是把它放在一个文件中(我们叫它html.handlebars)，然后在一个脚本标签中引用该文件:

<script id="html-template" type="text/x-handlebars-template" src="./html.handlebars"/>

然后从你的Javascript中创建一个模板:

var source   = $("#html-template").html();
var template = Handlebars.compile(source);

然后从模板生成HTML:

var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);

此时html为:

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>

，你可以像使用任何其他html字符串(例如:$(html).appendTo('body'))。

你可以制作任意多的车把模板，大小从整页到上面的小片段不等。

如果性能成为一个问题，您也可以查看预编译:http://handlebarsjs.com/precompilation.html

相关文章：