jquery 页脚，从更高目录调用 footer.html？

Question

我似乎无法弄清楚为什么这行不通。我的主目录中有一个 footer.html 文件，该文件所在目录的上一级。我试图将它包含在网站的所有页面上，而不必 footer.html文件复制到每个子目录。我假设 footer.html 之前的简单 ../ 会起作用，就像它在 HTML 中一样，但也许它在 jquery 中不起作用？它适用于 footer.html 文件所在的顶级目录中的所有页面。有人可以告诉我我在这里缺少什么吗？它验证为正确。我确定这是我忽略的事情。制作一个 footer.html 页面的全部意义在于我可以在一个地方更新它并且它在每个页面上更新，如果我无法弄清楚这一点，它有点违背了目的。另外：我应该将脚本移动到 head 标签而不是将其嵌套在页脚 div 标签中吗？

HEADER:

<head>
 <meta charset="utf-8" />
 <link rel="icon" href="/favicon.ico" type="image/x-icon">
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 <title></title>
 <style>
  body {background-color:#000000; color:#ffbb00;}
  a, h1 {color:#ffffff;}
  .center-div {
   margin: 0 auto;
   width: 1084px!important;
   background-color:#000000;}
  div.rule { margin: 0 auto;
   width:50%; 
   height:1px; 
   background:#ffbb00; 
   align:center; 
   overflow:hidden;}
 </style>
</head>

页脚：

<div id="footer">
 <script>
 $( "#footer" ).load( "../footer.html" );
 </script>
</div>

Answer 1

由于您的代码位于它试图查找的块内，它可能尚未加载。最佳做法是将 jquery 调用包装在 $(document).ready() 中。另外，在你的 url 中不使用相关的东西更干净，比如 ../。如果您使用以斜杠开头的相对路径，例如 /templates/footer.html，您可以在所有页面上重复使用相同的脚本。

Answer 2

你在这里混用了隐喻。

jQuery 的 .load 使用 URL 不符合 file-system 方法。您需要使用对页脚 URL 的绝对引用或使用一些 javascript 来弄清楚它是什么。例如：

window.location.href.substr(0,window.location.href.lastIndexOf("/")+1)+"footer.html"

这很愚蠢，但它会在您的 URL 中找到最后一个“/”，然后删除它后面的所有内容并在其后附加 footer.html。

jquery 页脚，从更高目录调用 footer.html？

jquery footer, call footer.html from higher directory?

html

javascript

jquery

footer