为多个页面上的导航栏创建可重用的 html

Question

我认为拥有可重用代码会很方便，特别是对于导航栏，因为它在我的所有页面中都是相同的。 这样我就不必浏览每一页并在发生更改时单独手动编辑每一页。

似乎可以使用 iframe，但我试过了，整个页面的样式都不正常了。 我可以修复它，但我想知道是否有类似的东西。

如果这样的事情可以工作，那就太棒了：

var navbar = document.getElementById('navbar');
navbar.innerHtml = url('navigation.txt');

我目前在我的网站上离线工作，所以我认为我不能发出 xmlhttp 请求。 正确的？ 至少我还没有让任何 ajax 示例工作。 这很不幸，因为我认为我可以轻松地将它用于我的应用程序。

这是我的导航栏标记。 它不是很复杂，所以我觉得最后我会手动编辑它。

<nav>
    <ul id="navbar">
        <li><a href="biosketch.html">Biosketch</a></li>
        <li><a href="projects.html">Class Projects</a>
            <ul>
                <li><a href="projects.html#SeniorProject">Senior Project</a></li>
                <li><a href="projects.html#WindTurbine">Wind Turbine</a></li>
            </ul>
        </li>
        <li><a href="#">Resume</a></li>
        <li><a href="#">Work Experience</a></li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</nav>

Answer 1

就像有人说的那样，通常这是在服务器端完成的，包含非 AJAX 站点。 但是，我认为您可以使用 google 关闭模板。 基本上，您在他们的模板语言中定义一个模板，该模板会生成一个您可以调用以呈现 HTML 的 javascript 函数。

http://code.google.com/closure/templates/docs/helloworld_js.html

例子：

--templates.soy

{namespace templates}

{template .nav}
<ul id="navbar">
    <li><a href="biosketch.html">Biosketch</a></li>
    <li><a href="projects.html">Class Projects</a>
        <ul>
            <li><a href="projects.html#SeniorProject">Senior Project</a></li>
            <li><a href="projects.html#WindTurbine">Wind Turbine</a></li>
        </ul>
    </li>
    <li><a href="#">Resume</a></li>
    <li><a href="#">Work Experience</a></li>
    <li><a href="#">Contact Me</a></li>
</ul>
{\template}

然后运行以下命令将其编译为 javascript 函数

java -jar SoyToJsSrcCompiler.jar --outputPathFormat templates.js  templates.soy

这将生成一个名为 templates.js 的文件，其中包含一个名为 templates.nav 的函数，您可以从页面调用该函数，如下所示：

document.getElementById('navbar').innerHTML = templates.nav();

这甚至没有使用数据合并，这将允许您传入一个数据对象来呈现非静态的 HTML。 但我只向你展示了这个，因为这就是你所要求的。 我知道您也可以将 html 粘贴到 JS 字符串中，但是您必须处理编辑器缺少语法帮助的问题。

一个缺点是这需要您似乎不介意的 JS。 但是，如果您想支持无 JS 客户端，则可以在服务器端生成模板。 还有一个编译器可以生成 Java google 闭包方法。 你可以在他们的网站上查找。

希望能帮助到你。

Answer 2

使用服务器端语言创建导航文件。 它可以是静态的，也可以是极其复杂的，这取决于您。

<?php include 'includes/nav.php'; ?>

nav.php 的内容可以完全是<nav>元素。 您可以理想地对其进行编程以根据当前“部分”显示/隐藏元素，还可以根据该部分切换某些类。

Answer 3

如果您要一遍又一遍地使用相同的代码，最好创建一个单独的文件并在不同的网页中实现它。

这是可能的： https ://www.w3schools.com/howto/howto_html_include.asp

您将导航栏的 html 写在一个单独的 .html 文件中，并像这样调用它：

<div w3-include-html="content.html"></div>

然后调用一个javascript函数

<script src="https://www.w3schools.com/lib/w3data.js"></script> 

这是w3IncludeHTML();

你应该让它运行起来！ 希望这有帮助！ :)

Answer 4

正如您所说，您非常可以“离线”使用 AJAX 调用，它是客户端代码。

但是如果我不使用服务器端语言（ASP.NET 或 PHP），我会这样做的方法是拥有一个小的 .js 文件来呈现导航栏，我只需添加一个<script src='js/navbar.js'></script>导航栏所在的位置。

这样，当您需要更改它时，您只需更改 .js，它就会在每个其他页面中更新。

Answer 5

几点建议：

• 如果您使用 JSP（或类似技术），您可以简单地使用 SiteMesh 之类的东西来帮助模板
• 您可以使用服务器端包含
• 您可以编写一个 JavaScript 函数以编程方式构建所需的 DOM（不需要 AJAX），然后在整个页面中调用该 JS 函数（无需重复代码）

Answer 6

通常，这些可重用的标记片段将在服务器端生成，主要是通过模板引擎。

您可以更改 Firefox 的安全设置以允许离线 AJAX 调用，但最好设置一个本地开发环境，您可以在其中开始使用服务器端语言，并从一开始就正确执行。

Answer 7

如果您想在不涉及任何服务器端编码的情况下实现它，请尝试以下操作：

var http = false;

if(navigator.appName == "Microsoft Internet Explorer") {
  http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
  http = new XMLHttpRequest();
}

http.open("GET", "navigation.txt");
http.onreadystatechange=function() {
  if(http.readyState == 4) {
    var navbar = document.getElementById('navbar');
        navbar.innerHtml = http.responseText;
  }
}
http.send(null);