HTML 中的绝对路径不起作用

Question

I'm trying to build a HTML template with a small javascript code.我正在尝试用一个小的 javascript 代码构建一个 HTML 模板。 Here is the stuff... At the root, I built two files :这是东西......在根目录下，我构建了两个文件：
index.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>

headerfooter.js页眉页脚.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>
    `

    })()

The idea is, when I load the index.html in a browser, to have the headerfooter.js script to write my <head> section and my <footer> section with the <links> and <script> I need.这个想法是，当我在浏览器中加载 index.html 时，让 headerfooter.js 脚本用我需要的<links>和<script>编写我的<head>部分和我的<footer>部分。

It's actually working perfectly when, for the script, the code I write is the relative path to the script : <script type="text/javascript" src="headerfooter.js"></script> , but it's not working with the absolute path to the root: <script type="text/javascript" src="/headerfooter.js"></script> .对于脚本，当我编写的代码是脚本的相对路径时，它实际上运行良好： <script type="text/javascript" src="headerfooter.js"></script> ，但它不适用于根目录的绝对路径： <script type="text/javascript" src="/headerfooter.js"></script> 。 This is a problem, because I would like this to be a template, so that I include this script in every html page I will create in my web folder without having to re-write the path everytime.这是一个问题，因为我希望这是一个模板，这样我就可以在我将在我的 web 文件夹中创建的每个 html 页面中包含这个脚本，而不必每次都重新编写路径。 Did I make a mistake somewhere ?我是不是在某个地方弄错了？

(PS: is it a bad practice trying to build a template like that ?) （PS：尝试构建这样的模板是一种不好的做法吗？）

Answer 1

How you run your page will matter.您如何运行页面将很重要。

If you're trying to run it with the file:// protocol (by just opening index.html ), an absolute path won't resolve correctly.如果您尝试使用file://协议运行它（只需打开index.html ），绝对路径将无法正确解析。 You'll want to somehow run an local server (there are dozens of ways to do this, depending what all you're using, too large a scope for this question).你会想要以某种方式运行本地服务器（有很多方法可以做到这一点，这取决于你使用的是什么，这个问题的范围太大了）。

If you are running some kind of local server (ie, http://localhost ), then try opening the file directly with http://localhost/headerfooter.js .如果您正在运行某种本地服务器（即http://localhost ），请尝试直接使用http://localhost/headerfooter.js打开文件。 If that doesn't work, your file isn't quite where you think it is.如果这不起作用，则您的文件不在您认为的位置。

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