[英]Possible to use slash (/) instead of hash (#) without page refresh window.location?
[英]How to remove the hash from window.location (URL) with JavaScript without page refresh?
我有这样的 URL: http://example.com#something
,如何删除#something
而不导致页面刷新?
我尝试了以下解决方案:
window.location.hash = '';
但是,这不会从 URL 中删除哈希符号#
。
如今,解决这个问题已经触手可及。 HTML5 History 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、Opera 11.50和IE 10。对于不受支持的浏览器,您始终可以编写一个优雅的降级脚本,在可用的情况下使用它:
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.location.href.substr(0, window.location.href.indexOf('#'))
要么
window.location.href.split('#')[0]
两者都将返回没有散列或后面任何内容的 URL。
关于您的编辑:
对window.location
的任何更改都会触发页面刷新。 您可以在不触发刷新的情况下更改window.location.hash
(尽管如果您的哈希与页面上的 id 匹配,窗口将跳转),但您无法摆脱井号。 选择哪个更糟糕......
最新的答案
关于如何在不牺牲(完全重新加载或将哈希符号留在那里)的情况下执行此操作的正确答案在此处。 在这里留下这个答案是关于 2009 年的原始答案,而利用新浏览器 API 的正确答案是在 1.5 年后给出的。
(太多的答案是多余的和过时的。)现在最好的解决方案是:
history.replaceState(null, null, ' ');
简洁大方:
history.replaceState({}, document.title, "."); // replace / with . to keep url
你可以这样做:
history.replaceState({}, document.title, window.location.href.split('#')[0]);
这也将删除尾随哈希。 例如: 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);
}
}
下面呢?
window.location.hash=' '
请注意,我将散列设置为单个空格而不是空字符串。
将散列设置为无效锚点也不会导致刷新。 如,
window.location.hash='invalidtag'
但是,我发现上述解决方案具有误导性。 这似乎表明在给定位置上有一个具有给定名称的锚点,尽管实际上没有。 同时,使用空字符串会导致页面移动到顶部,这有时是不可接受的。 使用空格还可以确保每当 URL 被复制、添加书签和再次访问时,页面通常位于顶部,空格将被忽略。
而且,嘿,这是我在 StackOverflow 上的第一个答案。 希望有人觉得它有用并且符合社区标准。
const url = new URL(window.location);
url.hash = '';
history.replaceState(null, document.title, url);
function removeLocationHash(){
var noHashURL = window.location.href.replace(/#.*$/, '');
window.history.replaceState('', document.title, noHashURL)
}
window.addEventListener("load", function(){
removeLocationHash();
});
<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>
将此代码放在头部
我想,这样会更安全
if (window.history) {
window.history.pushState('', document.title, window.location.href.replace(window.location.hash, ''));
} else {
window.location.hash = '';
}
尝试以下操作:
window.history.back(1);
$(window).on('hashchange', function (e) {
history.replaceState('', document.title, e.oldURL);
});
建立上面给出的答案之一,使用这个:
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;
}
您可以用 null 替换哈希
var urlWithoutHash = document.location.href.replace(location.hash , "" );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.