在 URL 中隐藏锚标记 [参考：Rails 在 URL 中隐藏 #anchor 标记]答案

【问题标题】：Hide anchor tag in URL [Ref: Rails hide #anchor tag in URL]在 URL 中隐藏锚标记 [参考：Rails 在 URL 中隐藏 #anchor 标记]
【发布时间】：2014-03-03 09:35:05
【问题描述】：

我采用@Old Pro 的回答：

history.replaceState({}, '', window.location.href.substring(0, window.location.href.indexOf('#')))

我的目标是：

从第 1 页重定向到第 2 页并跳转到锚点#DivTgt
一旦重定向，将从 URL 中删除 #DivTgt。因此 URL 将只显示 page2.php 而不是 page2.php#DivTgt

@Old Pro 的方法在 Firefox 上完美运行，但在 Chrome/Safari 上却不行。对于 Chrome/Safari，它会重定向和删除#DivTgt，但不会跳转到锚点#DivTgt。 @Old Pro 的方法插入到 Page2（目标页面）上。

我已经尝试过 replaceState 和 pushState 并且都返回相同的结果（即仅适用于 Firefox）

我错过了什么吗？

【问题讨论】：

任何运行示例？
@franchez 示例：在第 1 页转到第 2 页。然后在第 2 页内：
你身边有什么消息吗？
嘿@franchez 我道歉。离开了，今天去试试。

标签： javascript jquery html anchor url-redirection

【解决方案1】：

首先，我建议将您的 JavaScript 代码移动到 .ready() 函数中。否则，您的代码可能会在 DOM 尚未准备好时被调用。

我无法告诉您为什么它不起作用，但由于没有明确的规范，新的 html5 推送和替换状态功能显然存在一些问题。请阅读：history.replaceState() example?

所以为了帮助你，我可以提出一个解决方法。保留您的推送/替换状态功能，并使用 javascript 强制滚动到您的锚点。

你能看看我的例子吗？ http://francoisjeunesse.be/example/page1.php

Page1.php：

<a href="page2.php#DivTgt">Go to Page 2</a>

Page2.php：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js" ></script>
<script type="text/javascript"> 
$( document ).ready(function() {
    if (window.location.href.indexOf('#DivTgt') != -1){
        document.getElementById("DivTgt").scrollIntoView(true);
    }
    history.pushState({}, '', window.location.href.substring(0, window.location.href.indexOf('#')));

});
</script>
</head>
<body>
<div style="border:1px solid #000;min-height:1000px">spacer</div>
<a id="DivTgt" name="DivTgt"/>anchor is here</a>
</body>
</html>

【讨论】：

它可以工作，但它会产生另一个prblm。这不仅会跳转到从 page1 重定向的锚点，而且还会跳转到所有对锚点的直接访问（Ok--> Page1 to Page2#DivTgt; Not Ok--> Direct access to Page2，不打算锚定）。我想要这个跳转的原因是因为我在#DivTgt 安装了第 3 方插件。因此，对于从 Page1 进行的任何访问都应该直接跳转到 #DivTgt 而直接访问到 Page2 则不应该。这种复杂情况发生是因为第 3 方插件只能识别我的没有锚标记的 URL，如果它是 index.php#DivTgt，它将不会加载。无论如何，感谢您的大力帮助
@fanchez 我认为您的解决方案有效。唯一需要杀死的就是将其与对直接访问的影响隔离开来。这意味着锚点跳转应该只适用于 Page1 --> Page2#DivTgt。虽然直接访问第 2 页不应该跳转
@Mike 我网站上的示例已编辑。帖子也进行了编辑以反映您的要求。希望这会有所帮助:) 请不要忘记接受我的回答。
太棒了。谢谢@franchez
@ApoloRadomer 在我的示例中，我使用 Javascript 让它工作，如果你用 .html 替换 .php 它将工作相同。因此，您甚至可以在没有服务器的情况下直接在浏览器中使用它。希望这会有所帮助。