隐藏#来自 URL Javascript [重复]答案

【问题标题】：Hide # From Urls Javascript [duplicate]隐藏#来自 URL Javascript [重复]
【发布时间】：2017-06-24 11:56:09
【问题描述】：

在使用 url 中的 id 自动导航的交互式网站上工作后，我想知道如何在它仍能正常导航的情况下隐藏它。经过对这里的一些研究，我发现以下脚本对我不起作用。

if ($.browser.msie  && parseInt($.browser.version, 10) === 9 && window.location.href.indexOf("#")) 
    {
        document.location.href = String( document.location.href ).replace( /#/, "" );
    }

ankit Chaudhary 和 jetpack pony 回答了我的问题，我刚刚处理了一些问题。

【问题讨论】：

首先，$.browser 已被弃用多年，它可能已从最新的jQuerys 中删除。其次，代码只替换了#标记，而不是hash内容本身，听起来不是很有用。请澄清您的问题。
请注明“不适合我”。你的 sn-p 到底出了什么问题，应该怎么办？
它应该从 url 中隐藏 id，而不会影响这些元素及其 id 之间的导航。如果我要输入 www.site.com/#home，它会将我带到主页部分，并且 url 将显示为 www.site.com。
这会帮助你stackoverflow.com/a/5298684/290343
不要那样做..

标签： javascript jquery html url

【解决方案1】：

您可以使用 pushState 方法来操作 URL，而无需重新加载/刷新页面。

window.history.pushState(
    "object or string", 
    "Title",
    window.location.href.substring(0, window.location.href.indexOf('#'))
);

【讨论】：

下次我会记住这一点。这可以在同一个目标上多次使用吗？

【解决方案2】：

您在替换方法中仅替换“#”符号。要替换整个哈希，它应该如下所示：

.replace(/#.+$/, "");

另外，请考虑使用HTML5 history API，而不是document.location.href。它提供了两种方法：

pushState()：它会更改 URL 栏中的 URL并创建一个新的历史记录条目。例如，如果您在页面example.com/#foo 上并调用history.pushState("", "", "example.com")，则您的网址栏将显示example.com，当您按浏览器返回箭头时，它将带您回到example.com/#foo。

replaceState()：它会更改 URL 栏中的 URL并替换当前的历史记录条目。这意味着在与上述相同的示例中，浏览器后退箭头会将您带到example.com/#foo 之前的页面。

这是使用 pushState() 的代码示例：

var loc = window.location;
if (loc.hash) {
  history.pushState({}, document.title, loc.pathname + loc.search);
}

这个API的浏览器支持很好，详情查看：Browser compatibility

【讨论】：