javascript - 跨网站的单一导航栏？

Question

我目前正在为我的雇主构建一个网络应用程序，但我有一些限制。前端必须使用 HTML、CSS 和 Javascript，为此我必须使用很多不同的页面，每个页面共享相同的导航栏。

如果每个页面的导航都一样，是否可以一次写好导航栏，全站使用？当我更改链接或其他内容时，我很生气，我必须遍历并更改每个页面各自的导航链接。通常我会使用 Angular 之类的东西来实现这一点，但我不确定如何使用这种更准系统的方法来做到这一点。他们实际上也不使用任何 JS 库，所以如果有一种方法可以使用“原始”HTML CSS 和 JS 来实现，我很想了解它是如何工作的。

Answer 1

JQuery

由于 JQuery 是基于 JS 的，因此您可能会被允许使用它。然后，您可以将导航 div 添加到每个页面的模板中:

<div id="navigation"></div>

并在每个页面上包含一个执行以下 JQuery 代码的脚本:

$(function() {
    $("#navigation").load("navigation.html");
});

纯JavaScript

或者，如果您不能使用 JQuery，您可以使用纯 JavaScript，它更轻量但不那么干净。

无论您想在何处包含导航，只需包含一个脚本即可:

<script src="nav.js"></script>

其中包含基于 document.write 的导航:

document.write('<div>\
    ... your navigation content ...\
    </div>\
');