Question

我有一个简单的问题。我想知道是否有可能在我的导航栏中有一个外部html文件，并将其放入我网站的所有页面中。如果是这样，我该怎么做？我尝试过使用这些方法：

<script rel="import" src="navigation-bar.html"></script>

$("#nav-bar").load("navigation-bar.html")

但到目前为止他们都没有工作......我是否必须使用PHP，如果我这样做，我该如何实现呢。

请帮忙。

Answer 1

我会用PHP来做这件事。

以下是它如何运作的结构。

 <html>
 <head>
 <?php require('/directory/to/your/header.php'); ?>
 </head>
 <body>
   ...Your Content Here
 </body>
 </html>

在单独的header.php文件中，您将包含导航栏。

的header.php

 <?php 
   echo '...enter your Navbar HTML code';
 ?>

您的文件必须具有扩展名.php，并且每次使用php编写时，必须以

开头和结尾

 <?php 
    ...enter your php code...
 ?>

只需将php写入HTML即可将php与html混合使用。以下面的href为例：

 <a href = "<?php echo 'www.yourlinkhere.com'?>">Your link Name</a>

欲了解更多信息，请参阅： http://php.net/manual/en/

Answer 2

放：

include("navigation-bar.html")

代码顶部。

通过这种方式，您不必在要托管的每个网页中编写相同的导航代码。

OR

你可以尝试

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

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

<script>
w3IncludeHTML();
</script>

</body>
</html>

阅读详情：http://www.w3schools.com/howto/howto_html_include.asp

Answer 3

这可能是最简单的解决方案，即使在没有脚本支持的用户代理中也应该有效。

例如，您的页面将如下所示：

<html>
   <body>
    <iframe src="navbar.html" class="navbar" />
   </body>
</html>

html5中的导航栏

3 个答案: