CODEWITHSUNDEEP
javascripthtmlpath
arnaudambro
arnaudambro

Reputation: 2653

absolute path in HTML is not working

I'm trying to build a HTML template with a small javascript code. Here is the stuff... At the root, I built two files :
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>
    `

    })()

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.

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>. 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. Did I make a mistake somewhere ?

(PS: is it a bad practice trying to build a template like that ?)

Upvotes: 3

Views: 3664

Answers (1)

samanime
samanime

Reputation: 26547

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. 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 (i.e., http://localhost), then try opening the file directly with http://localhost/headerfooter.js. If that doesn't work, your file isn't quite where you think it is.

Upvotes: 1

Related Questions