有许多图书馆已经提到,但有时候,你不需要整个页面适合他们。有时,如果在所有页面(如导航栏)之间共享一个或两个元素,则可以创建可加载到每个页面的通用Javascript或HTML文件。
让我们用你的例子:
的index.html
<title> I'm an Index Page </title>
...
<h1> This is my own unique content </h1>
<div id="container>
</div>
...
about.html
<title> I'm an About Page </title>
...
<h1> This is different content </h1>
<div id="container>
</div>
...
common.html
<h1> Guardians of the Galaxy </h1>
<p> first impressions: awesome </p>
因此,尽管这些文件中的每一个文件可能会有一些差异,但您知道要将common.html放入这两个文件中。为了做到这一点,我们添加一个<div id="container"></div>
或其他一些等价包装。现在我们可以使用Javascript将common.html加载到每个container
。有一种方法可以在普通Javascript中执行此操作,但我强烈建议使用JQuery。
常见。JS
$(function() {
$("#container").load("common.html");
});
现在所有剩下的就是包括我们希望有common.html内容的所有文件,这个脚本(添加到这个的index.html,about.html)
<script type="text/javascript" src="common.js"></script>
[有一个叫做谷歌的事情(https://www.google.com/search?q=html+templating+js&oq=html+templating+js&aqs=chrome..69i57j69i64.5478j0j1&sourceid=chrome&ie=UTF -8) – TricksfortheWeb
你实际上在问像:_I想建立一个前进的车辆,如果我还可以添加一些附加功能,如座椅和微波炉,这将是一件好事。我搜索了一下,大家都在推荐钢铁,但是还有铝的解决方案吗?_ –
我认为您可以使用谷歌搜索的术语是“单页应用”。尝试理解它,以及与服务器端应用程序的区别。然后你可以用任何JS框架来做到这一点,比如余烬,反应,角度等等。 – Lux