Question

现在我有我的页面，css文件以及我的header.html和footer.html文件我试图将我的页眉和页脚导入我的所有内容页面。我一直在研究这个问题，而我最接近的就是使用：

<html> 
<object type="text/html" data="footer.html">
</object>
</html>

我在另一个Stack Exchange问题上发现了这个问题，但它将footer.html的内容插入到一个滚动的瘦高框中。（screenshot here）这是在Safari和Chrome上。我尚未在任何其他浏览器上测试过。谢谢！

此外，iframe也不起作用，并且还会在滚动框的顶部和右侧添加一条灰色线条以及框本身。请参阅此here。

<iframe src="foot.html" seamless></iframe>

更新：这是当前代码@ 12 PM MST：

指数：

<!DOCTYPE html>
<html>
<body>
<head>
<title>Cybersecurity - Andrew Schwartz</title>
<!-- begin css-->
<link rel="stylesheet" type="text/css" href="/resources/css/test.css" media="screen" />
<link rel="stylesheet" type="text/css" href="resources/css/type.css" />
<link rel="stylesheet" type="text/css" href="resources/css/navbarnew.css" />
<link rel="stylesheet" type="text/css" href="resources/css/general.css" />
<!-- end css-->
<link rel="import" href="foot.html">
</head>
<div id="header">
    <h1>cybersecure</h1>
</div>

<!--- <img src="resources/logo.png" style="width:885px;height:391px;"> --->

<!--- nav below --->
<div id="nav">
   <ul><li><a href="index.html" class="active">home</a></li>
      <li><a href="cyber-main.html">cybersecurity</a>
         </li>
      <li><a href="about.html">about</a></li>
      <li><a href="contact.html">contact</a></li>
   </ul>
</div>
<!--- nav above --->
<br>
<div id="page_title">
    <h1>home</h1>
</div>
<div id="color_two">
    <h2>Subheader</h2>
</div>

<h4>Test<br>Bacon ipsum dolor amet doner spare ribs tail bacon porchetta meatloaf beef pork chop cupim pork belly cow pastrami drumstick short ribs tri-tip. Chicken capicola swine sirloin pork belly, bacon picanha meatball tenderloin kielbasa pork sausage meatloaf shank. Short loin pork chicken, venison pastrami fatback ham hock sirloin. Biltong porchetta leberkas kielbasa frankfurter salami prosciutto drumstick pig strip steak cow pork chop sirloin shoulder beef ribs. Pork loin turkey spare ribs strip steak shank. Meatball ham ball tip, turkey t-bone jerky pork chop swine cow porchetta</h4>

<iframe src="foot.html" seamless></iframe>

<!--<object data="foot.html">
</object> -->


</body>
</html>

页脚：

<head>
<title>Cybersecurity - Andrew Schwartz</title>
<!-- begin css crud -->
<link rel="stylesheet" type="text/css" href="/resources/css/test.css" media="screen" />
<link rel="stylesheet" type="text/css" href="resources/css/type.css" />
<link rel="stylesheet" type="text/css" href="resources/css/navbarnew.css" />
<link rel="stylesheet" type="text/css" href="resources/css/general.css" />
<!-- end css crud -->
</head>

<footer>
  <h6><p>&copy; 2015 -
     <script language="JavaScript" type="text/javascript">
    now = new Date
    theYear=now.getYear()
    if (theYear < 1900)
    theYear=theYear+1900
    document.write(theYear)
    </script> Andrew Schwartz. All rights reserved. v 0.1b</p>
    <br>
    <br>
  <p>Contact me: someone@example.com</p></h6>
</footer>
</body>
</html>

请注意，在页脚中，我需要<head>标记来导入css以格式化字体。

Answer 1

如果必须是HTML，您可以尝试：

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $(".footer").load("footer.html"); 
    });
    </script> 
  </head> 

  <body> 

  </body> 

  <div class="footer"> </div>

</html>

这会将'footer.html'加载到div类页脚

中

来源：Include another HTML file in a HTML file

Answer 2

我倾向于使用PHP来做这些事情。

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

唯一的问题是包含的文件，在这种情况下页脚必须是.php文件

HTML导入到HTML问题

2 个答案: