Question

我尝试使用小的JavaScript代码构建HTML模板。这是东西......在根，我建立了两个文件：
index.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>HTML Template</title>
  <!-- Header initialized with /header-footer.js -->

</head>
<body>

  <footer>
    <!-- Footer initialized with /header-footer.js -->
    <script type="text/javascript" src="/headerfooter.js"></script>
  </footer>
</body>
</html>

headerfooter.js

(function () {

    /*************** HEADER *****************/
    const headerBeforeAppend = document.querySelector('head')

    document.querySelector('head').innerHTML = `
      ${headerBeforeAppend.innerHTML}

      <meta charset="UTF-8">
      <meta content="width=device-width,initial-scale=1" name="viewport">

      <!-- CSS -->
      <!-- Google fonts -->
      <link href="https://fonts.googleapis.com/css?family=Montserrat:100,400,700" rel="stylesheet">
      <!-- Bootstrap, Materialize, etc... you see the idea -->

      <!-- Javascript -->
      <!-- Fontawesome -->
      <script src="https://use.fontawesome.com/45d80bbe59.js"></script>
      <!-- jQuery, Bootstrap scripts, etc... you see the idea -->
    `

    /*************** FOOTER *****************/

    const footerBeforeAppend = document.querySelector('footer')

    document.querySelector('footer').innerHTML = `
      ${footerBeforeAppend.innerHTML}

      <!-- JQuery (for Bootstrap) -->
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <!-- Bootstrap CDN v4 alpha-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    `

    })()

当我在浏览器中加载index.html时，想法是让headerfooter.js脚本用<head>部分写我的<footer>部分和<links>部分<script>我需要。

对于脚本而言，我编写的代码是脚本的相对路径<script type="text/javascript" src="headerfooter.js"></script>，但它没有使用到根的绝对路径，它实际上工作得很好：<script type="text/javascript" src="/headerfooter.js"></script>。这是一个问题，因为我希望这是一个模板，所以我将这个脚本包含在我将在我的web文件夹中创建的每个html页面中，而不必每次都重新编写路径。我在某个地方犯了错误吗？

（PS：尝试构建这样的模板是不好的做法？）

Answer 1

如何运行您的网页很重要。

如果您尝试使用file://协议运行它（仅打开index.html），绝对路径将无法正确解析。你会想以某种方式运行一个本地服务器（有很多方法可以做到这一点，取决于你所使用的是什么，这个问题的范围太大了。）

如果您正在运行某种本地服务器（即http://localhost），请尝试使用http://localhost/headerfooter.js直接打开该文件。如果这不起作用，那么您的文件就不在您认为的位置。

HTML中的绝对路径无效

1 个答案: