我正在尝试使用小型 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>
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>
`
})()
这个想法是，当我在浏览器中加载index.html时，让 headerfooter.js 脚本来编写我的<head>部分和我的<footer>部分与<links> and <script> I need.
对于脚本来说，当我编写的代码是脚本的相对路径时，它实际上工作得很好：<script type="text/javascript" src="headerfooter.js"></script>，但它不适用于根的绝对路径：<script type="text/javascript" src="/headerfooter.js"></script>。
这是一个问题，因为我希望这是一个模板，这样我就可以将此脚本包含在我将在 Web 文件夹中创建的每个 html 页面中，而不必每次都重新编写路径。我是否在某个地方犯了错误？
（PS：尝试构建这样的模板是一种不好的做法吗？）
您如何运行页面很重要。
如果您尝试使用以下命令运行它file://协议（只需打开index.html），绝对路径将无法正确解析。您需要以某种方式运行本地服务器（有多种方法可以执行此操作，具体取决于您使用的所有内容，这个问题的范围太大）。
如果您正在运行某种本地服务器（即http://localhost），然后尝试直接使用打开文件http://localhost/headerfooter.js。如果这不起作用，则您的文件并不完全位于您认为的位置。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
