31

对于每个新页面，我都必须更新导航面板。这意味着我从一个页面到另一个页面复制和粘贴我的导航栏。我添加的页面越多，它就越难。现在我有不一致的导航栏。所以我正在寻找一种方法来制作一个只包含导航栏的 html 文件，然后将它嵌入到我的代码中，就像我对 CSS 和 JavaScript 所做的那样。这样，如果我编辑一个文件，所有其他页面都会更新。如果我使用 iframe 标签，会有很多问题，但我知道没有其他标签可以满足我的需要。所以我该怎么做？我做了一些研究，但我能找到的只是 iframe 标签。我该怎么办？

4

9 回答 9

16

如果你的页面是严格的 HTML+JavaScript，你可以使用 HTML DOM 的 innerHTML 属性。这是一个例子：

索引.html 

 <body>
  <nav id="navMenu"></nav>
  <div> rest of web page body here </div>
  <script src="script.js"></script>
 </body>

about.html 

 <body>
  <nav id="navMenu"></nav>
  <div> rest of web page body here </div>
  <script src="script.js"></script>
 </body>

脚本.js

 document.getElementById("navMenu").innerHTML =
 '<ul>'+
  '<li><a href="index.html">Home</a></li>'+
  '<li><a href="services.html">Services</a></li>'+
  '<li><a href="about.html">About</a></li>'+
 '</ul>';

这里重要的一行是 nav 标签，你需要做的就是在这个示例 about.html 的其他页面中添加这一行。

我还推荐 PHP 或类似的东西来完成你所需要的！

于 2015-03-03T23:43:10.297 回答
2

如果您的页面是严格的 HTML，那么您只需进行复制和粘贴。如果您使用的是 PHP，那会好很多，然后您可以简单地执行include或require，但现在的情况是，您只需要为导航进行干净的 HTML 编码。缩进你的代码，然后你会更容易在所有页面上复制和翻页。

如果您可以使用简单的 PHP 代码，请阅读以下内容：http ://www.w3schools.com/php/php_includes.asp

于 2013-03-16T04:11:08.327 回答
2

我强烈建议使用 PHP：

<?php include "header.html"; ?>

但是，如果这不是一个选项，您可以使用Server Side Includes：

在同一目录中的文件：

<!--#include file="header.html"-->

文件在不同的目录：

<!--#include virtual="/header.html"-->

你需要一个 Linux/Apache（不是 Windows）服务器才能工作。您还需要使用.shtml文件扩展名。

或者，如果您想保留.html扩展名，您可以让 Apache “认为”所有.html文件实际上都是.php：

在您网站的根目录创建一个 .htaccess 文件并添加以下行：

AddType application/x-httpd-php .html .htm

如果您将 PHP 作为 CGI 运行（可能不是这种情况），您应该改为：

AddHandler application/x-httpd-php .html .htm

（取自这个答案）

于 2013-03-16T04:12:09.960 回答
1

如果你想用PHP来实现，这个，你可以做类似下面的代码。您将拥有 2 个“模板”文件，然后是您需要的许多“内容”文件。

  • header.php将在标题中包含内容（徽标、导航菜单等）
  • footer.php将包括页脚上的内容（底部导航、版权、免责声明等）
  • content.php将包括您希望显示的实际内容。您可以拥有无​​限数量的“内容”页面。

请注意，虽然这些文件具有.php扩展名，但 HTML 代码仍然可以正常工作。所以你可以为每个做这样的事情content.php：

内容.php

<?php include "header.php"; ?>

<div class="content">
Your page content will go here
</div>

<?php include "footer.php"; ?>

头文件.php

<html>
<body>
<div class="header">
Header content such as nav bar here
</div>

页脚.php

<div class="footer">
Footer content such as copyright here
</div>
</body>
</html>

这样，您只需更改 和 的内容header.php一次footer.php，更改将反映在您包含文件的所有页面中。

如果您有任何其他问题或想再次解释某些内容，请随时发表评论。

于 2013-03-16T04:22:06.860 回答
1

事实上，如果你像我一样只做前端的事情，使用 jQuery 的 load() 就绰绰有余了。就像 Skitty 和 fskirschbaum 所说的那样。

但我想补充几点，
1.根据@Skitty的评论，在服务器端加载你的navbar.html很重要，就像简单地将它托管在你的github.io网站上并通过它的URL引用它一样

 $(document).ready(function() {
   $('#nav-container').load('https://berlinali.github.io/test%20header%20template/header.html #nav');}

2.如果你有css文件，把它放在你的html文件<header>部分的<style></style>里面。

如果您需要一些参考，我会将我的代码推送到 github 上。希望能帮助到你！ https://github.com/BerlinaLI/berlinali.github.io/tree/master/test%20header%20template

于 2017-03-14T09:35:27.463 回答
0

在这种情况下，PHP 可能是最好的方法，但由于听起来您已经在纯 HTML 和 JavaScript 中设置了所有内容，因此您可以考虑使用 jQuery 将外部文件加载到 DOM 中。

jquery.load('header.html')

这当然有它自己的一系列问题，但是您可以从一个简单的 .js 框架有效地控制一切，而无需使用 php 包含并且不需要 iFrame。

您仍然可能希望在没有打开 JavaScript 的情况下解决浏览器的后备问题，所以我只建议在不了解所有细节的情况下这样做，而且我仍然建议 php 仍然是一个更好的解决方案，因为您允许服务器这样做繁重的工作。

于 2013-03-16T04:33:29.170 回答
0

您可以使用服务器端脚本语言，如 php 或 ruby​​。或者你可以创建一些说 menu.json 文件并在 javascript 中创建菜单。

  1. 使用服务器端，您应该设置服务器，或者您可以使用XAMPP进行快速设置。

  2. 使用所有菜单链接创建 header.html

  3. 使用<?php include 'header.html'; ?>行包含菜单文件（您使用它的所有文件都应具有 .php 扩展名，或者您可以编辑 .html 扩展名的 php 配置文件）

于 2013-03-16T04:07:27.317 回答
0

我自己想通了，你可以使用 JavaScript 文件并使用 document.write 然后把它放在你想要的地方：

<script type="text/javascript" src="/js/sidebar.js"/>

这是我的js文件：

document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");

如果要在行内同时使用双引号和单引号，请注意这一点，我认为 < 和 > 符号必须用双引号引起来。这是我的完整代码：

     ----/js/sidebar.js----
document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");
document.write("<div id='sidebar'>");
if (page==1) { var p=" style='text-decoration: underline;'" } else { var p=" style='text-decoration: normal;'" }
if (page==2) { var pp=" style='text-decoration: underline;'" } else { var pp=" style='text-decoration: normal;'" }
if (page==3) { var ppp=" style='text-decoration: underline;'" } else { var ppp=" style='text-decoration: normal;'" }
if (page==4) { var pppp=" style='text-decoration: underline;'" } else { var pppp=" style='text-decoration: normal;'" }
if (page==5) { var ppppp=" style='text-decoration: underline;'" } else { var ppppp=" style='text-decoration: normal;'" }
document.write("<p><"+'a href="http://brandonc.handcraft.com/"'+p+">Home</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/about"'+pp+">About The Author</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/sevenmages"'+ppp+">The Seven Mages</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/comment"'+pppp+">Leave A Comment</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/calender"'+ppppp+">Calender</a></p>");
document.write("</div>");

     ----In place where you want code to go----
<script>var page=5</script>
<script type="text/javascript" src="/js/sidebar.js"/>

可能不是最有效的，我强烈建议在其他答案中使用 PHP，但这对我有用，并且不需要在每个 url 后添加 .php 。

于 2013-03-21T17:21:15.663 回答
0

只需使用 jQuery .load()。这是非常容易使用。这是一个例子

导航栏.html

<div>This is the navigation bar</div>

索引.html

<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>

<!--HEADER-->
<div id="nav-container"></div>
<!--HEADER-->

<p>This is the homepage.</p>
<script type="text/javascript">
$(document).ready(function() {
$('#nav-container').load('header.html');
});
</script>
</body>
</html>

about.html

<!DOCTYPE html>
<html>
<head>
<title>About Page</title>
</head>
<body>

<!--HEADER-->
<div id="nav-container"></div>
<!--HEADER-->

<p>This is the about page.</p>
<script type="text/javascript">
$(document).ready(function() {
$('#nav-container').load('header.html');
});
</script>
</body>
</html>
于 2016-12-14T13:01:15.323 回答