在 URL 中隐藏锚标记 [参考：Rails 在 URL 中隐藏 #anchor 标记]
Posted
技术标签:
【中文标题】在 URL 中隐藏锚标记 [参考：Rails 在 URL 中隐藏 #anchor 标记]【英文标题】：Hide anchor tag in URL [Ref: Rails hide #anchor tag in URL] 【发布时间】：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 我道歉。离开了，今天去试试。 【参考方案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 它将工作相同。因此，您甚至可以在没有服务器的情况下直接在浏览器中使用它。希望这会有所帮助。以上是关于在 URL 中隐藏锚标记 [参考：Rails 在 URL 中隐藏 #anchor 标记]的主要内容，如果未能解决你的问题，请参考以下文章
使用 JavaScript/jQuery 将 URL 保存在锚标记中？