在多个页面上创建可重复使用的导航栏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>

- ptpaterson

Answer 1

通常情况下，对于非AJAX网站，这通常是在服务器端使用include完成的。但是，我认为您可以利用Google Closure模板。基本上，您可以在他们的模板语言中定义一个模板，生成一个JavaScript函数，您可以调用该函数来呈现HTML。

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闭包方法。您可以在他们的网站上寻找它。

希望对您有所帮助。

- Ruan Mendes

---

这非常酷。我一定会去看看的。我也意识到，如果我要在网上发布任何网站，了解php/asp将是重要的，所以我很快就要开始在这方面努力了。 - ptpaterson

我建议你在使用它的过程中更深入地了解。可能有另一个 HTML 代码块，用于包装整个页面。也将其作为模板，以便更轻松地修改整体外观。该模板将在自身内调用导航模板。 - Ruan Mendes

Answer 2

使用服务器端语言创建一个导航文件，它可以是静态的，也可以非常复杂，具体取决于您的需求。

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

nav.php文件的内容可以是完整的<nav>元素。你可以理想地编程它，根据当前“部分”显示/隐藏元素，并基于该部分切换某些类。

- meder omuraliev

Answer 3

你非常可以在"离线"情况下使用AJAX调用，因为它是客户端代码。

但是，如果我没有使用服务器端语言（如ASP.NET或PHP），我会使用一个小的.js文件来渲染导航栏，并且只需在导航栏所在的位置添加一个<script src='js/navbar.js'></script>。

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

- Blindy

Answer 4

一些建议：

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

- kvista

Answer 5

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

通过这种方式可以实现：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();

希望这能帮到你！ :)

- Ananth Vivekanand

Answer 6

如果您想在没有任何服务器端编程的情况下实现它，请尝试这个：

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);

- Chandu

---

当我运行此代码时，出现“仅支持HTTP的跨域请求”错误。 - ptpaterson

Answer 7

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

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

- Jop de Klein