วิธีลบแฮชจาก window.location (URL) ด้วย JavaScript โดยไม่ต้องรีเฟรชหน้า?

ฉันมี URL ที่ชอบ: http://example.com#somethingฉันจะลบได้อย่างไร#somethingอย่างไรโดยไม่ทำให้หน้ารีเฟรช?

ฉันพยายามแก้ไขปัญหาต่อไปนี้:

window.location.hash = '';

อย่างไรก็ตามสิ่งนี้จะไม่ลบสัญลักษณ์แฮช#ออกจาก URL

คำถามเริ่มต้น:

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

หรือ

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

ทั้งสองจะคืนค่า URL โดยไม่มีแฮชหรืออะไรก็ตามหลังจากนั้น

เกี่ยวกับการแก้ไขของคุณ:

การเปลี่ยนแปลงใด ๆ ที่window.locationจะทำให้เกิดการรีเฟรชหน้า คุณสามารถเปลี่ยนแปลงได้window.location.hashโดยไม่ต้องเปิดใช้งานการรีเฟรช (แม้ว่าหน้าต่างจะข้ามไปหากแฮชของคุณตรงกับรหัสในหน้า) แต่คุณไม่สามารถกำจัดเครื่องหมายแฮชได้ เลือกสิ่งที่แย่กว่านี้ ...

คำตอบล่าสุดมากที่สุด

คำตอบที่ถูกต้องเกี่ยวกับวิธีการที่จะทำมันโดยไม่ต้องเสียสละ (โหลดทั้งแบบเต็มหรือออกจากป้ายกัญชามี) เป็นลงที่นี่ ออกจากคำตอบนี้ที่นี่แม้ว่าจะเกี่ยวกับการเป็นต้นฉบับในปี 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, 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()}

(มีคำตอบมากเกินไปซ้ำซ้อนและล้าสมัย) ทางออกที่ดีที่สุดคือ:

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

เรียบง่ายและสง่างาม:

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

หากต้องการลบแฮชคุณอาจลองใช้ฟังก์ชั่นนี้

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);
    }
}

นี่จะเป็นการลบแฮชตัวท้ายเช่นกัน เช่น: http://test.com/123#abc -> http://test.com/123

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

แล้วเรื่องต่อไปนี้ล่ะ?

window.location.hash=' '

โปรดทราบว่าฉันกำลังตั้งค่าแฮชเป็นหนึ่งช่องว่างไม่ใช่สตริงว่าง

การตั้งค่าแฮชไปยังจุดยึดที่ไม่ถูกต้องจะไม่ทำให้เกิดการรีเฟรช เช่น,

window.location.hash='invalidtag'

แต่ฉันพบทางออกข้างต้นที่จะทำให้เข้าใจผิด สิ่งนี้ดูเหมือนจะบ่งบอกว่ามีจุดยึดในตำแหน่งที่กำหนดพร้อมชื่อที่กำหนดแม้ว่าจะไม่มี ในเวลาเดียวกันการใช้สตริงว่างทำให้หน้าเลื่อนไปด้านบนซึ่งไม่สามารถยอมรับได้ในบางครั้ง การใช้ช่องว่างยังช่วยให้มั่นใจได้ว่าเมื่อใดก็ตามที่คัดลอก URL และคั่นหน้าเว็บและเยี่ยมชมอีกครั้งหน้าจะอยู่ที่ด้านบนสุดและจะไม่มีการเว้นวรรค

และนี่คือคำตอบแรกของฉันใน StackOverflow หวังว่าใครบางคนพบว่ามันมีประโยชน์และมันตรงกับมาตรฐานชุมชน

คุณสามารถทำได้ดังนี้:

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

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

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

ใส่รหัสนี้ในส่วนหัว

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

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

ฉันคิดว่ามันจะปลอดภัยกว่านี้

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

ลองทำสิ่งต่อไปนี้:

window.history.back(1);

นี่เป็นอีกวิธีในการเปลี่ยนตำแหน่งโดยใช้ href และล้างค่าแฮชโดยไม่ต้องเลื่อน

การแก้ปัญหาความมหัศจรรย์จะมีการอธิบายที่นี่ รายละเอียดที่นี่

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

หมายเหตุ: API ที่เสนอตอนนี้เป็นส่วนหนึ่งของ WhatWG HTML Living Standard

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

คุณสามารถแทนที่แฮชด้วย null

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