我正在尝试使用小的JavaScript代码构建HTML模板。这是东西...从根本上讲，我建立了两个文件：
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>
`
})()
这个想法是，当我在浏览器中加载index.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：尝试构建这样的模板是一种不好的做法吗？）
您如何运行页面将很重要。
如果您尝试通过file://协议运行它（只需打开index.html），则绝对路径将无法正确解析。您将需要以某种方式运行本地服务器（有数十种方法可以执行此操作，这取决于您使用的是什么，这个问题的范围太大）。
如果您正在运行某种本地服务器（例如http://localhost），请尝试直接使用打开文件http://localhost/headerfooter.js。如果这不起作用，则说明文件与您认为的位置不符。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句