HTML中的绝对路径不起作用 [英] absolute path in HTML is not working
问题描述
我试图用一个小的javascript代码构建一个HTML模板。这里是东西......在根源处，我创建了两个文件：
index.html
<！DOCTYPE html>
< html lang =fr>
< head>
< title> HTML模板< /标题>
<！ - 使用/header-footer.js初始化的标题 - >
< / head>
< body>
< footer>
<！ - 使用/header-footer.js初始化的页脚 - >
< script type =text / javascriptsrc =/ 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 = 1name =viewport> ;
<！ - CSS - >
<！ - Google字体 - >
< link href =https：// fonts。 googleapis.com/css?family=Montserrat:100,400,700rel =stylesheet>
<！ - Bootstrap，Materialize等......您看到这个主意 - >
<！ - Javascript - >
<！ - Fontawesome - >
< script src =https://use.fontawesome.com/45d80bbe59.js >< / script>
<！ - jQuery，Bootstrap脚本等...您看到了这个想法 - >
`
/ ** ************* FOOTER ***************** /
const footerBeforeAppend = document.querySelector（'footer' ）
document.querySelector（'footer'）。innerHTML =`
$ {footerBeforeAppend.innerHTML}
<！ - JQuery（用于Bootstrap） - - >
< script src =https://code.jquery.com/jquery-3.2.1.slim.min.jsintegrity =sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr / rE9 / Qpg6aAZGJwFDMVNA / GpGFF93hXpG5KkNcrossorigin =anonymous >< /脚本>
<！ - Bootstrap CDN v4 alpha - >
< script src =https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.jsintegrity =sha384-b / U6ypiBEHpOf / 4 + 1nzFpr53nxSS + GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4crossorigin =anonymous>< / script>
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.jsintegrity =sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1crossorigin =anonymous> < /脚本>
`
}）（）
当我在浏览器中加载index.html时，要让headerfooter.js脚本写我的 当脚本中，我写的代码是脚本的相对路径时，它实际上可以很好地工作： < 如果您尝试使用 I'm trying to build a HTML template with a small javascript code. Here is the stuff... At the root, I built two files : headerfooter.js The idea is, when I load the index.html in a browser, to have the headerfooter.js script to write my It's actually working perfectly when, for the script, the code I write is the relative path to the script : How you run your page will matter. If you're trying to run it with the If you are running some kind of local server (i.e., 这篇关于HTML中的绝对路径不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！< head> 部分，我的< footer> ; 部分包含< links> 和< script> 我需要。 / p>
< script type =text / javascriptsrc =headerfooter.js>< / script> ，但它不适用于根目录的绝对路径：< script type =text / javascriptsrc =/ headerfooter.js>< / script> 。
这是一个问题，因为我希望这是一个模板，以便我将这个脚本包含在每个我将在我的web文件夹中创建的html页面中，而不必每次都重新写入路径。我在某个地方犯了错吗？
（PS：是否尝试构建这样的模板是一种不好的做法？）
文件运行它，请执行以下操作：// 协议（通过打开 index.html ），绝对路径无法正确解析。你会想以某种方式运行一个本地服务器（有几十种方法来做到这一点，这取决于你所用的所有东西，这个问题的范围太大）。
<如果您正在运行某种本地服务器（即， http：// localhost ），则尝试直接使用 http：/打开文件。 /localhost/headerfooter.js 。如果这样做不起作用，那么你的文件并不完全符合你的想法。
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>
(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>
`
})()
<head> section and my <footer> section with the <links> and <script> I need.<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 ?)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).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.
