Sayfayı yeniden yüklemeden bir sorgu dizesini değiştirme

Bir fotoğraf galerisi oluşturuyorum ve fotoğraflara göz atıldığında sorgu dizesini ve başlığını değiştirebilmek istiyorum.

Aradığım davranış genellikle sürekli / sonsuz sayfanın bazı uygulamalarında görülür, burada siz aşağı kaydırırken sorgu dizesi sayfa numarasını ( http://x.com?page=4 ) vb. Artırmaya devam eder . Bu, teoride basit, ancak büyük tarayıcılarda güvenli olan bir şey istiyorum.

Bu harika gönderiyi buldum ve örneği takip etmeye çalışıyordum window.history.pushstate, ancak bu benim için işe yaramıyor gibi görünüyor. İdeal olup olmadığından emin değilim çünkü tarayıcı geçmişini değiştirmeyi gerçekten umursamıyorum.

Sadece o anda görüntülenen fotoğrafa, fotoğraf her değiştirildiğinde sayfayı yeniden yüklemeden yer imi koyma olanağı sunabilmek istiyorum.

Sorgu dizesini değiştiren bir sonsuz sayfa örneği: http://tumbledry.org/

UPDATE bu yöntemi buldu:

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

benim için çalışıyor gibi görünüyor, ancak yeni bir Chrome kullanıyorum .. muhtemelen eski tarayıcılarda bazı sorunlara neden olur?

Hash modifikasyonu arıyorsanız, çözümünüz iyi çalışıyor. Ancak sorguyu değiştirmek isterseniz, söylediğiniz gibi pushState'i kullanabilirsiniz. İşte bunu doğru bir şekilde uygulamanıza yardımcı olabilecek bir örnek. Test ettim ve iyi çalıştı:

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

Sayfayı yeniden yüklemez, ancak yalnızca URL sorgusunu değiştirmenize izin verir. Protokolü veya ana bilgisayar değerlerini değiştiremezsiniz. Ve tabii ki HTML5 Geçmiş API'sini işleyebilen modern tarayıcılar gerektiriyor.

Daha fazla bilgi için:

http://diveintohtml5.info/history.html

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

Fabio'nun cevabından yola çıkarak, bu soruyla karşılaşan herkes için muhtemelen faydalı olacak iki işlev yarattım. Bu iki işlevle, insertParam()argüman olarak bir anahtar ve değerle çağrı yapabilirsiniz . Ya URL parametresini ekler ya da aynı anahtara sahip bir sorgu parametresi zaten mevcutsa, bu parametreyi yeni değerle değiştirir:

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

Aşağıdaki JavaScript kitaplığını büyük bir başarıyla kullandım:

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

HTML5 geçmiş API'sinin yanı sıra eski tarayıcılar için bir geri dönüş yöntemini (# kullanarak) destekler.

Bu kütüphane esasen "history.pushState" etrafında bir çoklu dolgudur.

Fabio'nun yanıtını iyileştirmek ve sayfayı yeniden yüklemeden URL dizesine özel anahtar ekleyen bir işlev oluşturmak istiyorum.

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

O halde geçmiş API'si tam olarak aradığınız şeydir. Eski tarayıcıları da desteklemek istiyorsanız, tarayıcı geçmiş API'sini sağlamıyorsa URL'nin karma etiketini değiştirmeye geri dönen bir kitaplık arayın.