Question

我在网站顶部有一个图片横幅，是我从网络服务下载的。我有一个header.html和一个home.html文件，为了便于编辑，我将header.html代码导入home.html文件。当我运行header.html时横幅运行完美，但是当我运行home.html它没有。当我检查元素时，为横幅分配了空间，但没有内容。

家庭代码

<html>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Saisentan Music</title>
    <meta name="home page" content="Epic Orchestral Music by Taylor Barton">
    <link rel="stylesheet" href="style.css">

</head>

<body>

    <script src="https://www.w3schools.com/lib/w3.js"></script>
    <div w3-include-html="header.html"></div>
    <script>w3.includeHTML();</script>

    HOME


</body>

我把标题代码放在下面的链接中，因为它真的很长而且难以阅读（感谢计算机生成的代码）。在同一文档中是home.html和header.html

的屏幕截图

https://docs.google.com/document/d/1hWNrjLP11FvTJQgBPa19_NmVn1d5nTr-k1dhqdVwcE0/edit?usp=sharing

Answer 1

您正在调用的函数，w3.includeHTML查看页面上的所有标记，查找具有属性w3-include-html的标记，尝试获取文件，并将该文件作为innerHTML插入。脚本不会被执行。

w3.includeHTML = function(cb) {
  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 && this.status == 200) {
          elmnt.innerHTML = this.responseText;
          elmnt.removeAttribute("w3-include-html");
          w3.includeHTML(cb);
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
  if (cb) cb();
};

您需要调用这些脚本。 This question might help

Answer 2

尝试输入此代码

<script src="https://www.w3schools.com/lib/w3.js"></script>

在您的身体之前或在头部标签内

Answer 3

看着Sven的冲浪者回答（见下文），我意识到我的脚本没有被运行。我用来导入html的js没有运行脚本，所以我改为使用iframe标签导入我的横幅代码，它运行得很好。

导入HTML文件后未加载横幅

3 个答案: