Bagaimana cara menghapus hash dari window.location (URL) dengan JavaScript tanpa refresh halaman?

332

Saya memiliki URL seperti:, http://example.com#somethingbagaimana cara menghapus #something, tanpa menyebabkan halaman diperbarui?

Saya mencoba solusi berikut:

window.location.hash = '';

Namun, ini tidak menghapus simbol hash #dari URL.

Tom Lehman
sumber
3
Apakah Anda benar-benar ingin melakukan ini? Ini akan menyebabkan penyegaran halaman.
seth
9
Apakah mungkin dilakukan tanpa refresh halaman?
Tom Lehman
1
Hal ini mungkin. Perpustakaan sejarah AJAX menghadapinya. Tapi itu tidak mudah, dan harus dilakukan secara berbeda untuk hampir setiap browser. Bukan sesuatu yang ingin Anda masuki.
Gabriel Hurley
Apakah ada pertimbangan dengan meninggalkan "#" di belakang selain yang visual?
user29660
Kemungkinan rangkap Modifikasi URL tanpa memuat ulang halaman
PayteR

Jawaban:

210

Pertanyaan awal:

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

atau

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

keduanya akan mengembalikan URL tanpa hash atau apa pun setelahnya.

Sehubungan dengan hasil edit Anda:

Setiap perubahan window.locationakan memicu penyegaran halaman. Anda dapat mengubah window.location.hashtanpa memicu penyegaran (meskipun jendela akan melompat jika hash Anda cocok dengan id di halaman), tetapi Anda tidak bisa menghilangkan tanda hash. Pilih yang lebih buruk ...

JAWABAN TERBARU

Jawaban yang tepat tentang bagaimana melakukannya tanpa mengorbankan (baik memuat ulang penuh atau meninggalkan tanda hash di sana) ada di sini . Meninggalkan jawaban ini di sini sehubungan dengan menjadi yang asli di 2009 sedangkan yang benar yang memanfaatkan API browser baru diberikan 1,5 tahun kemudian.

Gabriel Hurley
sumber
22
Ini benar-benar salah, Anda dapat mengubah window.location.hash dan itu tidak akan memicu penyegaran.
Evgeny
61
@ Evgeny - Itulah jawaban saya. Saya secara eksplisit mengatakan bahwa mengubah window.location.hash tidak akan memicu penyegaran. "Anda dapat mengubah window.location.hash tanpa memicu penyegaran (meskipun jendela akan melompat jika hash Anda cocok dengan id di halaman)".
Gabriel Hurley
3
Tidak ada ulang halaman - itu ada di pertanyaan. Ini bukan jawaban karena membutuhkan / memaksa memuat ulang halaman!
Ed_
10
juga berpikir itu seharusnya bukan ✓answer
abernier
4
Ini bukan jawaban untuk pertanyaan OP.
Bryce
586

Memecahkan masalah ini jauh lebih mudah dijangkau saat ini. The HTML5 Sejarah API memungkinkan kita untuk memanipulasi bar lokasi untuk menampilkan URL apapun dalam domain saat ini.

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

Demo kerja: http://jsfiddle.net/AndyE/ycmPt/show/

Ini berfungsi di Chrome 9, Firefox 4, Safari 5, Opera 11.50 dan di IE 10. Untuk browser yang tidak didukung, Anda selalu bisa menulis skrip yang merendahkan anggun yang memanfaatkannya jika tersedia:

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

Jadi Anda dapat menyingkirkan simbol hash, hanya saja tidak di semua browser - belum.

Catatan: jika Anda ingin mengganti halaman saat ini dalam riwayat browser, gunakan replaceState()sebagai ganti pushState().

Andy E
sumber
9
Gunakan baris ini untuk memastikan Anda tidak kehilangan string kueri: history.pushState ("", document.title, window.location.pathname + window.location.search);
Phil Kulak
6
@ Phil: terima kasih telah menunjukkannya, saya telah memperbarui jawabannya. Saya terlalu terbiasa menggunakan URL cantik.
Andy E
1
Untuk versi IE yang lebih lama, sepertinya Anda perlu menggunakan document.documentElement alih-alih document.body. Lihat jawaban ini stackoverflow.com/a/2717272/359048
jasonmcclurg
29
Saya sarankan menggunakan replaceState daripada pushState, untuk tidak membuat entri tambahan dalam riwayat browser.
Nico
1
@santiagoarizti: Anda benar, saya baru saja sampai pada kesimpulan yang sama. Saya tidak memeriksa kode yang saya tulis (7 tahun yang lalu!) Dengan benar dan melewatkan bahwa saya juga mengubah status tombol saat menghapus hash. Karena Anda mengubah hash secara manual, Anda selalu dapat memicu acara sendiri, saya kira.
Andy E
85

(Terlalu banyak jawaban yang redundan dan ketinggalan jaman.) Solusi terbaik saat ini adalah:

history.replaceState(null, null, ' ');
Pacerier
sumber
5
gunakan history.pushState(null, null, ' ')sebaliknya jika Anda ingin menyimpan sejarah.
nichijou
9
Mungkin bermanfaat untuk menjelaskan apa yang lewat nulluntuk statedan titleparameter pada akhirnya tidak.
V. Rubinetti
Masalah dengan ini, dan sisanya, adalah bahwa hal itu tidak memicu pertukaran, meskipun hash sekarang kosong ketika tidak sebelumnya.
Curtis
1
Dalam TypeScript, null tidak diperbolehkan untuk parameter kedua karena perintah mengambil string. Mozilla merekomendasikan string kosong.
Curtis
41

Sederhana dan elegan:

history.replaceState({}, document.title, ".");  // replace / with . to keep url
cprcrack
sumber
3
gunakan titik alih-alih garis miring jika Anda ingin tetap berada di direktori yang sama
vahanpwns
1
Harap perbarui jawaban terkait dengan catatan @vahanpwns, untuk digunakan .sebagai ganti /. Menggunakan /perubahan url ke jalur root.
Isaac Gregson
5
Terima kasih atas jawaban ini, saya modifikasi ke history.replaceState({}, document.title, location.href.substr(0, location.href.length-location.hash.length));untuk use case saya.
Scott Jungwirth
5
Ini tidak menyimpan permintaan url.
Vladislav Kostenko
2
Kasus penggunaan saya juga menggantikan alih-alih mendorong, tetapi ini lebih masuk akal bagi saya:history.replaceState(null, document.title, location.pathname + location.search);
MDMower
16

Untuk menghapus hash, Anda dapat mencoba menggunakan fungsi ini

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);
    }
}
Rahul Gupta
sumber
13

Ini akan menghapus hash trailing juga. mis .: http://test.com/123#abc -> http://test.com/123

if(window.history.pushState) {
    window.history.pushState('', '/', window.location.pathname)
} else {
    window.location.hash = '';
}
Chris Gunawardena
sumber
Ini menghapus semua kueri permintaan yang ada di URL :(
kevgathuku
1
@kevgathuku Anda dapat menambahkannya kembali dengan location.search, mis .: `window.history.pushState ('', '/', window.location.pathname + window.location.search)`
Chris Gunawardena
6

Bagaimana dengan yang berikut ini?

window.location.hash=' '

Harap dicatat bahwa saya menyetel hash ke satu ruang dan bukan string kosong.


Mengatur hash ke anchor yang tidak valid juga tidak menyebabkan penyegaran. Seperti,

window.location.hash='invalidtag'

Tapi, saya menemukan solusi di atas menyesatkan. Ini tampaknya menunjukkan bahwa ada jangkar pada posisi yang diberikan dengan nama yang diberikan meskipun tidak ada. Pada saat yang sama, menggunakan string kosong menyebabkan halaman berpindah ke atas yang terkadang tidak dapat diterima. Menggunakan spasi juga memastikan bahwa setiap kali URL disalin dan bookmark dan dikunjungi lagi, halaman biasanya akan di bagian atas dan ruang akan diabaikan.

Dan, hei, ini adalah jawaban pertama saya di StackOverflow. Semoga seseorang menemukan itu berguna dan cocok dengan standar komunitas.

Nibras Reeza
sumber
7
Pengaturan hash to whitespace masih menyimpan # di akhir URL, saya pikir tujuannya adalah untuk menghapusnya sama sekali.
mahemoff
1
Itu jejak hash di akhir URL. Pertanyaannya adalah bagaimana menghapusnya.
Gurmeet Singh
Ya bagaimana kita bisa menghapus # juga dengan string hash.
Bhavin Thummar
6

Anda dapat melakukannya seperti di bawah ini:

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

METALHEAD
sumber
1
Jawaban yang berkilau bintangnya tidak cocok untukku, tapi yang ini berhasil. Terima kasih!
Dev
5
const url = new URL(window.location);
url.hash = '';
history.replaceState(null, document.title, url);
Casey
sumber
2
Sementara kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang mengapa dan / atau bagaimana kode ini menjawab pertanyaan meningkatkan nilai jangka panjangnya.
rollstuhlfahrer
3
<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>

letakkan kode ini di bagian kepala

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

window.addEventListener("load", function(){
    removeLocationHash();
});
Vimal Kumar
sumber
2

Saya pikir, itu akan lebih aman

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

Coba yang berikut ini:

window.history.back(1);
Vishal Sharma
sumber
23
Ini tidak menjawab pertanyaan jika pengguna telah datang langsung ke URL termasuk hash.
julukan
Trik ini sangat berguna ketika Anda hanya ingin membuat tautan ke halaman sebelumnya, tetapi tautan itu tersembunyi di banyak file js.
ValidfroM
Persis apa yang saya cari. Ini berfungsi dengan baik untuk menghapus tagar yang baru saja dibuat oleh aplikasi web saya untuk menggunakan nilai yang dikembalikan oleh fungsi javasript.
user278859
0

Berikut adalah solusi lain untuk mengubah lokasi menggunakan href dan menghapus hash tanpa menggulir.

Solusi ajaib dijelaskan di sini . Spesifikasi di sini .

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

CATATAN: API yang diusulkan sekarang merupakan bagian dari WhatWG HTML Living Standard

voscausa
sumber
0
  $(window).on('hashchange', function (e) {
        history.replaceState("", document.title, e.originalEvent.oldURL);
    });
JohnMathew
sumber
-1

Anda dapat mengganti hash dengan null

var urlWithoutHash = document.location.href.replace(location.hash , "" );
Devang Bhagdev
sumber
1
Pertanyaannya bertanya "tanpa menyebabkan halaman me-refresh", tetapi metode ini memang me-refresh halaman. Anda harus mencatat fakta ini dalam jawaban Anda, jadi kita tidak perlu membuang waktu untuk mencari tahu secara langsung bahwa Anda menjawab pertanyaan yang berbeda dari yang sebenarnya kami coba jawab di sini.
Vladimir Kornea
Itu tidak menyegarkan halaman.
Ciprian