如何从窗口中删除散列。位置(URL)与JavaScript没有页面刷新?

最初的问题:

window.location.href.substr(0, window.location.href.indexOf('#'))

或

window.location.href.split('#')[0]

两者都会返回URL后不带散列或任何内容。

关于你的编辑:

对window.location的任何更改都会触发页面刷新。您可以在不触发刷新的情况下更改window.location.hash(尽管如果您的散列与页面上的id匹配，窗口将跳转)，但您无法摆脱散列符号。你挑一个更糟的……

最新答案

如何做到这一点而不牺牲(要么完全重载或留下散列号)的正确答案是在这里。这里的答案是2009年的原始答案，而使用新的浏览器api的正确答案是在1.5年后给出的。

现在解决这个问题已经触手可及了。HTML5历史API允许我们操作位置栏来显示当前域中的任何URL。

function removeHash () {
history.pushState("", document.title, window.location.pathname
+ window.location.search);
}

工作演示:http://jsfiddle.net/AndyE/ycmPt/show/

这适用于Chrome 9, Firefox 4, Safari 5, IE 10中的Opera 11.50 而且。对于不受支持的浏览器，你总是可以写一个优雅的降级脚本，在可用的地方使用它:

function removeHash () {
var scrollV, scrollH, loc = window.location;
if ("pushState" in history)
history.pushState("", document.title, loc.pathname + loc.search);
else {
// Prevent scrolling by storing the page's current scroll offset
scrollV = document.body.scrollTop;
scrollH = document.body.scrollLeft;


loc.hash = "";


// Restore the scroll offset, should be flicker free
document.body.scrollTop = scrollV;
document.body.scrollLeft = scrollH;
}
}

所以你可以去掉哈希符号，只是不是在所有浏览器—然而。

_{注意:如果你想替换浏览器历史记录中的当前页面，请使用replaceState()而不是pushState()。}

试试下面的方法:

window.history.back(1);

您可以将哈希替换为null

var urlWithoutHash = document.location.href.replace(location.hash , "" );

简单优雅:

history.replaceState({}, document.title, ".");  // replace / with . to keep url

下面这个怎么样?

window.location.hash=' '

请注意，我设置哈希到一个单一的空间，而不是一个空字符串。

将散列设置为无效锚也不会导致刷新。例如,

window.location.hash='invalidtag'

但是，我发现上面的解决方案是误导性的。这似乎表明在给定位置上有一个具有给定名称的锚，尽管没有锚。同时，使用空字符串会导致页面移到顶部，这有时是不可接受的。使用空格还可以确保当URL被复制、收藏和再次访问时，页面通常会位于顶部，空格将被忽略。

这是我在StackOverflow上的第一个答案。希望有人觉得它有用，它符合社区标准。

<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>

把这个代码放在头部分

这也将删除尾随散列。 例如:http://test.com/123#abc -> http://test.com/123

if(window.history.pushState) {
window.history.pushState('', '/', window.location.pathname)
} else {
window.location.hash = '';
}

要删除散列，可以尝试使用此函数

function remove_hash_from_url()
{
var uri = window.location.toString();
if (uri.indexOf("#") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("#"));
window.history.replaceState({}, document.title, clean_uri);
}
}

下面是另一个使用href更改位置并在不滚动的情况下清除散列的解决方案。

神奇的解决方案是解释在这里。规格在这里。

const hash = window.location.hash;
history.scrollRestoration = 'manual';
window.location.href = hash;
history.pushState('', document.title, window.location.pathname);

注意:提议的API现在是WhatWG HTML生活标准的一部分

(太多的答案是多余的和过时的。)现在最好的解决方案是:

history.replaceState(null, null, ' ');

const url = new URL(window.location);
url.hash = '';
history.replaceState(null, document.title, url);

你可以这样做:

history.replaceState({}, document.title, window.location.href.split('#')[0]);

$(window).on('hashchange', function (e) {
history.replaceState('', document.title, e.oldURL);
});

我觉得这样更安全

if (window.history) {
window.history.pushState('', document.title, window.location.href.replace(window.location.hash, ''));
} else {
window.location.hash = '';
}

function removeLocationHash(){
var noHashURL = window.location.href.replace(/#.*$/, '');
window.history.replaceState('', document.title, noHashURL)
}


window.addEventListener("load", function(){
removeLocationHash();
});

根据上面给出的答案之一，用这个:

var scrollV, scrollH
var loc = window.location;
scrollV = document.body.scrollTop;
scrollH = document.body.scrollLeft;
if ("pushState" in history) {
history.pushState("", document.title, loc.pathname + loc.search);


// Restore the scroll offset
document.body.scrollTop = scrollV;
document.body.scrollLeft = scrollH;


} else {
loc.hash = "";


// Restore the scroll offset
document.body.scrollTop = scrollV;
document.body.scrollLeft = scrollH;
}