使用 JavaScript 删除 URL 中的片段，不导致页面重新加载答案

【问题标题】：Remove fragment in URL with JavaScript w/out causing page reload使用 JavaScript 删除 URL 中的片段，不导致页面重新加载
【发布时间】：2010-09-21 02:35:32
【问题描述】：

背景：我有一个 HTML 页面，可以让您扩展某些内容。由于这种扩展只需要加载页面的一小部分，它是通过 JavaScript 完成的，而不是通过定向到新的 URL/HTML 页面。但是，作为奖励，用户可以永久链接到此类扩展部分，即向其他人发送类似的 URL

http://example.com/#foobar

并立即为该其他用户打开“foobar”类别。这可以使用 parent.location.hash = 'foobar'，所以这部分很好。

现在的问题：当用户关闭页面上的这样一个类别时，我想再次清空URL片段，即将http://example.com/#foobar变成http://example.com/以更新永久链接显示。但是，使用parent.location.hash = '' 这样做会导致重新加载整个页面（例如在 Firefox 3 中），我想避免这种情况。使用window.location.href = '/#' 不会触发页面重新加载，但会在 URL 中留下看起来不太好看的“#”符号。那么在流行的浏览器中是否有一种方法可以在不触发页面刷新的情况下通过 JavaScript 删除包含“#”符号的 URL 锚点？

【问题讨论】：

这个related question 读起来很有趣。

标签： javascript html url fragment-identifier

【解决方案1】：

正如其他人所提到的，HTML5 中的replaceState 可用于删除 URL 片段。

这是一个例子：

// remove fragment as much as it can go without adding an entry in browser history:
window.location.replace("#");

// slice off the remaining '#' in HTML5:    
if (typeof window.history.replaceState == 'function') {
  history.replaceState({}, '', window.location.href.slice(0, -1));
}

【讨论】：

固体。我很欣赏检测到删除 # 的能力，但向后兼容。
现场回答。我现在正在使用这个

【解决方案2】：

既然您要控制对哈希值的操作，为什么不直接使用表示“无”的标记，例如“#_”或“#default”。

【讨论】：

我认为这是一个值得考虑的想法。
是的，您也可以使用空白锚点，因此 URL 最终为 example.com/#。这几乎是完美的，但我认为它最终也会让一些游客感到有些困惑。理想情况下，甚至不会显示哈希字符...
显然。您的脚本应该在哈希中没有任何内容的情况下运行。

【解决方案3】：

您可以使用闪亮的新 HTML5 window.history.pushState 和 replaceState 方法，如 ASCIIcasts 246: AJAX History State 和 on the GitHub blog 中所述。这使您可以更改整个路径（在同一源主机内），而不仅仅是片段。要试用此功能，请browse around a GitHub repository 使用最新的浏览器。

【讨论】：

【解决方案4】：

还有另一种选择，而不是使用哈希，你可以使用javascript: void(0); 示例：<a href="javascript:void(0);" class="open_div">Open Div</a>

我想这也取决于您何时需要这种链接，因此您最好检查以下链接：

使用方法：http://www.brightcherry.co.uk/scribbles/2010/04/25/javascript-how-to-remove-the-trailing-hash-in-a-url/ 或者在这里查看关于什么更好的辩论：Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

【讨论】：

【解决方案5】：

将此代码放在头部。

<script type="text/javascript">
    var uri = window.location.toString();
    if (uri.indexOf("?") > 0) {
        var clean_uri = uri.substring(0, uri.indexOf("?"));
        window.history.replaceState({}, document.title, clean_uri);
    }
</script>

【讨论】：

【解决方案6】：

$(document).ready(function() {
        $(".lnk").click(function(e) {
            e.preventDefault();
            $(this).attr("href", "stripped_url_via_desired_regex");
        });
    });

【讨论】：

谢谢弗洛林，你能解释一下这段代码的作用吗？

【解决方案7】：

所以用

parent.location.hash = ''第一

然后做

window.location.href=window.location.href.slice(0, -1);

【讨论】：

以任何方式更改 location.href 都会重新加载页面。
这确实可以消除包括“#”在内的整个片段，但 Evgeny 是对的，它会重新加载页面

【解决方案8】：

正如其他人所说，你不能这样做。另外...说真的，作为jQuery Ajaxy作者-我已经部署了完整的ajax网站多年-我可以保证没有最终用户曾经抱怨过，或者甚至可能注意到有这个哈希值正在发生，用户不要只要它有效并且他们得到他们想要的，不在乎。

一个合适的解决方案是 HTML5 PushState/ReplaceState/PopState ;-) 它不再需要片段标识符： https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history 对于支持此 HTML5 状态功能的 HTML5 和 HTML4 兼容项目，请查看https://github.com/browserstate/History.js :-)

【讨论】：

这样做有比“用户关心”更好的理由。例如：wistia.com/blog/fresh-url