HTML 中的絕對路徑不起作用

Question

我正在嘗試用一個小的 javascript 代碼構建一個 HTML 模板。 這是東西......在根目錄下，我構建了兩個文件：
索引.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>

頁眉頁腳.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：嘗試構建這樣的模板是一種不好的做法嗎？）

Answer 1

您如何運行頁面將很重要。

如果您嘗試使用file://協議運行它（只需打開index.html ），絕對路徑將無法正確解析。 你會想要以某種方式運行本地服務器（有很多方法可以做到這一點，這取決於你使用的是什么，這個問題的范圍太大了）。

如果您正在運行某種本地服務器（即http://localhost ），請嘗試直接使用http://localhost/headerfooter.js打開文件。 如果這不起作用，則您的文件不在您認為的位置。

HTML 中的絕對路徑不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2017-10-16 18:39:38

HTML 中的絕對路徑不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2017-10-16 18:39:38

解決方案1
1 已采納 2017-10-16 18:39:38