J'essaye de construire un modèle HTML avec un petit code javascript. Voici les choses ... A la racine, j'ai construit deux fichiers:
index.html
chemin absolu en HTML ne fonctionne pas
<!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>
`
})()
L'idée est, quand je charge l'indice. html dans un navigateur, pour avoir le script headerfooter.js pour écrire ma section <head> et ma section <footer> avec les <links> et <script> dont j'ai besoin. Il fonctionne réellement parfaitement quand, pour le script, le code que j'écris est le chemin relatif au script: <script type="text/javascript" src="headerfooter.js"></script>, mais il ne fonctionne pas avec le chemin absolu de la racine: <script type="text/javascript" src="/headerfooter.js"></script>. Ceci est un problème, car je voudrais que ce soit un modèle, de sorte que j'inclue ce script dans chaque page html que je vais créer dans mon dossier web sans avoir à réécrire le chemin à chaque fois. Ai-je fait une erreur quelque part?
(PS: est-ce une mauvaise pratique d'essayer de construire un modèle comme ça?)
Où est le script relatif à vos pages? Est-ce que ce sera toujours pareil? Sinon, vous devriez utiliser un chemin 'absolute' comme:' http: // www.example.com/example.js' - '/ headerfooter.js' est un chemin relatif ... – brso05
Le fichier est-il réellement hébergé en absolu? chemin? Si vous naviguez sur '/ headerfooter.js', obtenez-vous le code javascript? – theGleep