HTML动态加载header.html导航栏到index.html失败，求解决

问题描述 #

我正在学习HTML，之前导航栏在index.html里正常显示，现在把导航栏单独放到header.html，想用<div w3-include-html="header.html"></div>嵌入到index.html里，但完全没效果。以下是相关代码：

header.html 代码 #

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="styles.css"/>
<header>
  <nav>
    <a href="#">Home</a>
    <a href="#">Projects</a>
    <a href="#">Certifications</a>
    <a href="#">Experience</a>
    <a href="#">Others</a>
    <div class="animation start-home"></div>
  </nav>
</header>
</html>

index.html 代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
    <title>Homepage</title>
  </head>
  <body>
    <div w3-include-html="header.html"></div>

    <div class="background">
      <div>
        <div class="Page_Title">
          <h1>RITHVIK VADDADI</h1> 
        </div> 
        <div class="arrow-wrap">
          <div class="arrow-down arrow"></div>
          <div class="arrow-down arrow"></div>
        </div>
      </div>
    </div>

    <div class="About">
      <h2>About Me</h2>
      <div class="ABT">
        <img src="Images/My PFP.jpg" alt="Avatar" class="Avatar">
        <p class="desciption">Hello, I am Rithvik Vaddadi, a current NSF with a diploma in Cyber Security and Digital Forensics. Drawn to the world of computers, I aspire to make people's lives easier and protect them from cyber attacks with the help of technology around us. As a problem solver, I am known to use my creative and critical thinking skills when providing solutions in my past leadership roles and projects. When involved in projects, I tend to notice people's strengths and weaknesses and assign them to roles where their potential would be fully maximized in the project. When my mind is fixed on a goal, I dedicate my energy and focus to achieving the goal.</p>
      </div>
      <h3>Looking</h3>
    </div>

  </body>
</html> 

CSS 代码 #

nav{
    position: relative;
    margin: 27px auto 0;
    width: 590px;
    height: 50px;
    background: black;
    border-radius: 8px;
    font-size: 0;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
}

nav a{
    font-size: 15px;
    text-transform: uppercase;
    color: whitesmoke;
    text-decoration: none;
    line-height: 50px;
    position: relative;
    z-index: 1;
    display: inline-block;
    text-align: center;
}

nav .animation{
    position: absolute;
    height: 5px;
    bottom: 0;
    z-index: 0;
    background: darkred;
    width: 100px;
    border-radius: 8px;
    transition: all .5s ease 0s;
}

a:nth-child(1){
    width: 100px;
}

nav .start-home,a:nth-child(1):hover~.animation{
    width: 100px;
    left: 0;
}

a:nth-child(2){
    width: 100px;
}

nav .start-projects,a:nth-child(2):hover~.animation{
    width: 100px;
    left: 100px;
}

a:nth-child(3){
    width: 150px;
}

nav .start-certifications,a:nth-child(3):hover~.animation{
    width: 150px;
    left: 200px;
}

a:nth-child(4){
    width: 100px;
}

nav .start-others,a:nth-child(4):hover~.animation{
    width: 100px;
    left: 350px;
}

a:nth-child(5){
    width: 100px;
}

nav .start-others,a:nth-child(5):hover~.animation{
    width: 100px;
    left: 450px;
}

.background{
    background-image: url(Images/CardistryBGD2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    padding-top: 5px;
    margin: -8px; 
}

.Page_Title{
    text-align: center;
    overflow: auto;
    height: 500px;
    width: auto;
    line-height: 320px;
    position: relative;
    margin-bottom: 8px;
}

.arrow-wrap {
    position: relative;
    bottom: 0px;
    -webkit-animation: arrow 0.5s 1s infinite ease-out alternate;
    -moz-animation: arrow 0.5s 1s infinite ease-out alternate;
    -o-animation: arrow 0.5s 1s infinite ease-out alternate;
    animation: arrow 0.5s 1s infinite ease-out alternate;
    width: 56px;
    margin-left: 600px;
}
  
.arrow-wrap:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}
  
.arrow {
    padding: 15px;
    border-left: solid 5px red;
    border-bottom: solid 5px whitesmoke;
    position: relative;
    display: inline-block;
}
  
.arrow-down {
    transform: rotate(-45deg);
    bottom:200px;
    margin-top: -50px;
    position: relative;
}
  
@-webkit-keyframes arrow {
    0% {
      bottom: 0px;
    }
    100% {
      bottom: 10px;
    }
}
  
@-moz-keyframes arrow {
    0% {
      bottom: 0px;
    }
    100% {
      bottom: 10px;
    }
}
  
@keyframes arrow {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: -90px;
    }
}

h1{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 9vw;
    color: white;
}

h2{
    text-align: center;
    color: white;
    font-size: 3vw;
    margin: 8px;
    padding: 30px;
}

.Avatar{
    vertical-align: middle;
    width: 145px;
    height: 140px;
    border-radius: 50%;
    margin-left: 75px;
}

.About{
    margin: -9px;
    background-image: url(Images/CardBG.jpg);
    background-size: 100%;

}

.ABT{
    display: flex;
    max-width: 1150px;
    align-items: center;
    color: white;
    margin-top: -20px;
    font-family: 'Montserrat';
}

.desciption{
    margin-left: 50px;
}

问题原因分析 #

• 缺少嵌入逻辑脚本：w3-include-html是自定义属性，浏览器默认不识别，需要对应的JavaScript代码实现文件包含功能，目前未添加该脚本。
• header.html结构违规：header.html包含完整的<html>、<!DOCTYPE html>标签，嵌入后会导致index.html出现多个根HTML标签，违反HTML规范，引发渲染异常。

修复方案 #

1. 精简header.html内容 #

删除header.html中的完整HTML骨架，仅保留导航相关代码：

<header>
  <nav>
    <a href="#">Home</a>
    <a href="#">Projects</a>
    <a href="#">Certifications</a>
    <a href="#">Experience</a>
    <a href="#">Others</a>
    <div class="animation start-home"></div>
  </nav>
</header>

（注：styles.css已在index.html中引入，无需重复添加）

2. 在index.html中添加嵌入脚本 #

在index.html的</body>标签前添加以下JavaScript代码，解析w3-include-html属性：

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "页面未找到";}
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
}
includeHTML();
</script>

3. 验证文件路径 #

确保header.html与index.html处于同一目录，若header.html在子文件夹中，需调整属性值为相对路径，例如"includes/header.html"。

完成以上修改后，导航栏就能正常嵌入index.html并显示原有样式了。

内容的提问来源于stack exchange，提问作者Rithvik Vaddadi