Mengubah string kueri tanpa memuat ulang halaman

Saya membuat galeri foto, dan ingin mengubah string dan judul kueri saat foto-foto itu diramban.

Perilaku yang saya cari sering terlihat dengan beberapa implementasi halaman berkelanjutan / tak terbatas, di mana saat Anda menggulir ke bawah, string kueri terus menambah nomor halaman ( http://x.com?page=4 ) dll .. Ini seharusnya sederhana dalam teori, tapi saya ingin sesuatu yang aman di browser utama.

Saya menemukan postingan yang bagus ini , dan mencoba mengikuti contoh dengan window.history.pushstate, tetapi sepertinya tidak berhasil untuk saya. Dan saya tidak yakin apakah itu ideal karena saya tidak terlalu peduli tentang mengubah riwayat browser.

Saya hanya ingin menawarkan kemampuan untuk menandai foto yang sedang dilihat, tanpa memuat ulang halaman setiap kali foto diubah.

Berikut adalah contoh halaman tak terbatas yang mengubah string kueri: http://tumbledry.org/

UPDATE menemukan metode ini:

window.location.href = window.location.href + '#abc';

tampaknya berfungsi untuk saya, tetapi saya menggunakan chrome baru .. mungkin akan menyebabkan beberapa masalah dengan browser lama?

Jika Anda mencari modifikasi Hash, solusi Anda berfungsi dengan baik. Namun, jika Anda ingin mengubah kueri, Anda dapat menggunakan pushState, seperti yang Anda katakan. Ini adalah contoh yang mungkin membantu Anda menerapkannya dengan benar. Saya menguji dan itu bekerja dengan baik:

if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
    window.history.pushState({path:newurl},'',newurl);
}

Ini tidak memuat ulang halaman, tetapi hanya memungkinkan Anda untuk mengubah kueri URL. Anda tidak akan dapat mengubah protokol atau nilai host. Dan tentunya membutuhkan browser modern yang bisa mengolah HTML5 History API.

Untuk informasi lebih lanjut:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Berdasarkan jawaban Fabio, saya membuat dua fungsi yang mungkin berguna bagi siapa pun yang tersandung pada pertanyaan ini. Dengan dua fungsi ini, Anda dapat memanggil insertParam()dengan kunci dan nilai sebagai argumen. Ini akan menambahkan parameter URL atau, jika parameter kueri sudah ada dengan kunci yang sama, itu akan mengubah parameter itu ke nilai baru:

//function to remove query params from a URL
function removeURLParameter(url, parameter) {
    //better to use l.search if you have a location/link object
    var urlparts= url.split('?');   
    if (urlparts.length>=2) {

        var prefix= encodeURIComponent(parameter)+'=';
        var pars= urlparts[1].split(/[&;]/g);

        //reverse iteration as may be destructive
        for (var i= pars.length; i-- > 0;) {    
            //idiom for string.startsWith
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {  
                pars.splice(i, 1);
            }
        }

        url= urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : "");
        return url;
    } else {
        return url;
    }
}

//function to add/update query params
function insertParam(key, value) {
    if (history.pushState) {
        // var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1';
        var currentUrlWithOutHash = window.location.origin + window.location.pathname + window.location.search;
        var hash = window.location.hash
        //remove any param for the same key
        var currentUrlWithOutHash = removeURLParameter(currentUrlWithOutHash, key);

        //figure out if we need to add the param with a ? or a &
        var queryStart;
        if(currentUrlWithOutHash.indexOf('?') !== -1){
            queryStart = '&';
        } else {
            queryStart = '?';
        }

        var newurl = currentUrlWithOutHash + queryStart + key + '=' + value + hash
        window.history.pushState({path:newurl},'',newurl);
    }
}

Saya telah menggunakan pustaka JavaScript berikut dengan sangat sukses:

https://github.com/balupton/jquery-history

Ini mendukung API riwayat HTML5 serta metode fallback (menggunakan #) untuk browser lama.

Library ini pada dasarnya adalah polyfill di sekitar `history.pushState '.

Saya ingin meningkatkan jawaban Fabio dan membuat fungsi yang menambahkan kunci kustom ke string URL tanpa memuat ulang halaman.

function insertUrlParam(key, value) {
    if (history.pushState) {
        let searchParams = new URLSearchParams(window.location.search);
        searchParams.set(key, value);
        let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString();
        window.history.pushState({path: newurl}, '', newurl);
    }
}

Maka API riwayat adalah apa yang Anda cari. Jika Anda juga ingin mendukung browser lama, cari pustaka yang kembali memanipulasi tag hash URL jika browser tidak menyediakan API riwayat.