HTML 中的绝对路径不起作用答案

【问题标题】：absolute path in HTML is not workingHTML 中的绝对路径不起作用
【发布时间】：2018-03-28 08:45:10
【问题描述】：

我正在尝试使用一个小的 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 脚本用我需要的 <links> 和 <script> 编写我的 <head> 部分和 <footer> 部分。

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

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

【问题讨论】：

脚本相对于您的页面在哪里？会永远一样吗？如果不是，您应该使用 absolute 路径，例如：http://www.example.com/example.js - /headerfooter.js 是相对路径...
文件实际上是否托管在绝对路径中？如果你浏览到/headerfooter.js，你会得到javascript代码吗？

标签： javascript html path

【解决方案1】：

你如何运行你的页面很重要。

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

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

【讨论】：