Question

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

Answer 1

如果您的网页严格来说是HTML + JavaScript，则可以使用HTML DOM innerHTML属性。这是一个例子：

index.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>

<强>的script.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或类似的东西来完成你需要的东西！

Answer 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

（取自this answer）

Answer 3

如果您的网页严格是HTML，那么您只需复制和粘贴即可。如果你使用PHP可能会好得多，那么你可以简单地做一个包含或要求但是现在的情况是，你只需要做的就是做一个干净的HTML编码为您的导航。缩进您的代码，然后您将更容易在所有页面上复制和分页。

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

Answer 4

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

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

请注意，虽然这些文件具有.php个扩展名，但HTML代码仍能完美运行。所以你可以为每个content.php做一些这样的事情：

<强> content.php

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

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

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

<强>的header.php

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

<强> footer.php

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

通过这种方式，您只需更改一次header.php和footer.php的内容，这些更改就会反映在您已包含文件的所有页面中。

如果您有任何其他问题或希望再次解释一些问题，请随时发表评论。

Answer 5

事实上，如果你只做像我这样的前端工作，那么使用带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文件，只需把它放在＆lt;风格＆gt;＆lt; /风格＆GT;在＆lt;标题＆gt;你的html文件的一部分。

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

Answer 6

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

使用服务器端，您应该设置服务器，或者您可以使用XAMPP进行快速设置。
使用所有菜单链接创建header.html
使用<?php include 'header.html'; ?>行输入菜单文件（您使用它的所有文件应使用.php扩展名，或者您可以编辑.html扩展名的php配置文件）

Answer 7

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

jquery.load('header.html')

这当然有其自身的一系列问题，但您可以从简单的.js框架有效地控制所有内容，而无需使用php包含，也不需要iFrame。

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

Answer 8

我自己想出来了，你可以使用一个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>");

如果你想在行内使用双引号和单引号，请注意这一点，我认为＆lt;和＆gt;标志必须是双引号。这是我的完整代码：

     ----/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，但这对我有用，并且在每个网址后都不需要.php。

Answer 9

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

<强> navbar.html

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

<强>的index.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>

如何在我的HTML中使我的导航栏相同？

9 个答案: