Javascript 与 html 锚点冲突答案

【问题标题】：Javascript conflicting with html anchorJavascript 与 html 锚点冲突
【发布时间】：2015-07-01 06:22:27
【问题描述】：

我目前正在创建一个具有持久页眉和页脚的website。为了减少代码重复，我在加载每个不同的页面时使用 jquery 来加载 header.html 和 footer.html。

使用此页眉和页脚的每个 html 页面都使用以下代码加载它。

<!-- Header and footer loading -->
<script> 
  $(function() {
    $("#header").load("header.html"); 
    $("#footer").load("footer.html");
  });
</script>

<div id="header">
  (header.html content rendered here)
</div>

解释下一部分的最佳方式是访问我链接的网站。我想做的是让下拉按钮将用户从网站上的任何其他页面带到设备页面的特定部分。如您目前所见，此功能仅在用户已经在设备页面上时才有效。

根据我所阅读的所有内容，跨页锚点的设置方式应与页内锚点相同。使用<a href="equipment.html#anchorname></a>，然后将其链接到带有<a id="anchorname></a> 的页面。但是，这种方法仅在用户与锚点在同一页面上时才有效。我很确定这是由于锚机制的时间安排和 jQuery 代码运行的时间。

我的两个问题是……

谁能解释正在发生的导致我的锚无法工作的事件顺序。
我需要做什么才能让我的跨站点锚点正常工作？

谢谢，如果您需要特定代码 sn-ps 或有任何问题，请告诉我。

【问题讨论】：

我没有进入该站点，创建一个MCVE 并在此处发布如果您需要进一步的帮助但是，锚不是 URL 的一部分，它是在客户端处理的，并且浏览器控制它的行为。您可以在脚本中捕获它并做任何您喜欢的事情。 “锚定”链接没有问题，它与 id 无关。您遇到的 1 个潜在问题（如果这不是拼写错误）是您的 a 标签中的 id 属性未关闭。

标签： javascript jquery html anchor

【解决方案1】：

您的跨页锚点完全按预期工作。考虑禁用 JavaScript 的基本 HTML 页面：

然后#gradalls 或#trucks 将立即“滚动”到相应的锚点。我说“滚动”是因为没有足够的内容可以滚动到任何地方——页面只会静止不动。

接下来，您的一系列 jQuery 加载事件将像这样触发：

$(function() {
  $("#header").load("header.html"); 
  $("#footer").load("footer.html");
  $("#xl4100-99").load("xl4100_99.html");
  $("#xl4200-95").load("xl4200_95.html");
  $("#lowboy-93").load("lowboy_93.html");
  $("#gmctruck-93").load("gmctruck_93.html");
});

它们将填充您页面中的各种容器，并且内容将向下增长，但是页面不会滚动。这已经发生了。

解决方案 1

最好的解决方案和 SEO 友好的解决方案是简单地将内容包含在每个页面中，不动态加载它。事实上，除了您的关键字，search engine simulator 只会见

Dave Ankney Gradall Equipment Gradalls 拖车卡车

并且没有任何链接。然后它可能会消失很长时间，因为那里没有任何多汁。由于您使用的是 S3，因此您必须手动在每个页面中包含内容。

解决方案 2

要么这样，要么使用适当的服务器后端，如 PHP，在这种情况下，您可以像这样包含 HTML 的每个部分：

<body>
  <div class="main">
    <div id="header"><?php include("header.php"); ?>
    </div>

（仅重命名 header.html 为 header.php）

解决方案 3

如果你真的只是想让跳转工作，你可以像这样改变你的 JS：

<!-- Header and footer loading -->
<script>
$(function() {
  // Create Deferred instances that can be handed to $.when()
  var d1 = $.Deferred();
  var d2 = $.Deferred();
  // var d3 = 
  // var d4 = 

  // Set up a chain of events
  $.when(d1, d2).then(function() {
    // When everything has loaded, jump to the fragment
    var hash = window.location.hash
    if (hash !== "") {
      window.location.hash = hash;
    }
  });

  // Perform the load calls
  $("#header").load("header.html", function() { d1.resolve(); });
  $("#footer").load("footer.html", function() { d2.resolve(); });
  // ...
});
</script>

我希望这就是你要找的。p>

【讨论】：

好文章！当我将 jQuery 添加到页面时，我担心它可能会与刮板发生冲突。出于某种原因，我认为页眉和页脚的内容是“可抓取的”，但经过仔细检查，你是对的。显然，这个网站的主要功能之一就是通过网络吸引客户，所以我将不得不重新考虑我对 jQuery 的使用。这将只是一个静态站点，因此取消了 php 选项。我认为你的第一个建议是最实用的。在这种情况下是否有其他选择可以减少代码/html 重用，还是我需要硬着头皮？
谢谢。现在，在过去没有多少人认真使用服务器端编码的时候，我们使用 Dreamweaver 之类的工具来生成带有菜单标题的静态 HTML 文件。但是，对于每一次更改，我们都必须启动 DW 并重新上传许多接触过的文件。痛苦。
您需要一个服务器端解决方案，甚至可能需要像 WordPress 这样的 CMS 来让这一切变得如此简单。另外，出于 SEO 考虑，您需要自己的域名，并且越短越好（您的网站基本上是 Google 所看到的亚马逊的扩展）。有处理所有事情的一体化提供商，或者至少为您提供像 PHP 这样的服务器工具。我在小型网站上使用 GoDaddy。

【解决方案2】：

也许对你有帮助

在页面加载完成后读取url并在hash标签上拆分url调用下面的方法....

function scrollTo(hash) {
    location.hash = "#" + hash;
}

【讨论】：