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站点的包含。但是，我认为你可以使用谷歌闭包模板。基本上，您可以使用模板语言定义模板，生成可以调用以呈现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谷歌闭包方法的编译器。你可以在他们的网站上找到它。

希望它有所帮助。

Answer 2

使用服务器端语言创建导航文件。它可能是静态的，也可能非常复杂，取决于你。

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

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

Answer 3

你可以使用AJAX调用“离线”，它是客户端代码。

但是，如果我不使用服务器端语言（ASP.NET或PHP），那么我这样做的方法是使用一个小的.js文件来渲染导航栏，我只需添加一个{{ 1}}导航栏的位置。

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

Answer 4

一些建议：

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

Answer 5

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

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

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

Answer 7

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

可以通过以下方式：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();

你应该让它运转起来！希望这有帮助！：）

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

7 个答案: