0
小さなJavaScriptコードでHTMLテンプレートを作成しようとしています。ここのものは...ルートで、私は2つのファイルが構築されています：私は、インデックスをロードする際
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
(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>
`
})()
をアイデアは、あります。 htmlのブラウザで、headerfooter.jsスクリプトに<head>セクションと<footer>セクションに<links>と<script>が必要です。
スクリプトの場合、私が書いたコードはスクリプトへの相対パスです：<script type="text/javascript" src="headerfooter.js"></script>しかし、それはルートへの絶対パスでは動作しません：<script type="text/javascript" src="/headerfooter.js"></script>。 これは問題です。これをテンプレートにして、毎回パスを書き換えなくても、Webフォルダに作成するすべてのHTMLページにこのスクリプトを含めることができます。私はどこかで間違いを犯しましたか？
（PS：そのようなテンプレートを作成するのは悪い習慣ですか？）
あなたのページに関連するスクリプトはどこですか？それはいつも同じでしょうか？そうでなければ 'http：// www.example.com/example.js'のような'絶対パス 'を使うべきです - '/headerfooter.js'は相対パスです... – brso05
ファイルは実際に絶対パスでホストされていますか？パス？ '/ headerfooter.js'を参照すると、javascriptコードが得られますか？ – theGleep