ページをリロードせずにクエリ文字列を変更する

フォトギャラリーを作成しています。写真を閲覧するときにクエリ文字列とタイトルを変更できるようにしたいと考えています。

私が探している動作は、連続/無限ページの一部の実装でよく見られます。クエリ文字列を下にスクロールしても、ページ番号（http://x.com?page=4）が増加し続けます。これは理論的には単純ですが、主要なブラウザで安全なものを求めています。

私はこの素晴らしい投稿を見つけ、で例を追おうとしましたwindow.history.pushstateが、それは私にはうまくいかないようです。また、ブラウザーの履歴を変更する必要がないので、それが理想的かどうかはわかりません。

写真が変更されるたびにページをリロードすることなく、現在表示されている写真をブックマークする機能を提供できるようにしたいだけです。

以下は、クエリ文字列を変更する無限ページの例です。http：//tumbledry.org/

UPDATEはこのメソッドを見つけました：

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

それは私のために動作するように見えますが、私は新しいクロムを使用しています。それはおそらく古いブラウザでいくつかの問題を引き起こすでしょうか？

ハッシュの変更を探している場合、ソリューションは正常に動作します。ただし、クエリを変更する場合は、前述のようにpushStateを使用できます。これは、適切に実装するのに役立つ例です。私はテストし、それはうまくいきました：

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

ページは再読み込みされませんが、URLクエリの変更のみが可能です。プロトコルまたはホストの値を変更することはできません。そしてもちろん、HTML5 History APIを処理できる最新のブラウザーが必要です。

詳細については：

http://diveintohtml5.info/history.html

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

ファビオの答えに基づいて、私はこの質問に出くわした人におそらく役立つ2つの関数を作成しました。これら2つの関数を使用するinsertParam()と、キーと値を引数として呼び出すことができます。URLパラメータを追加するか、同じパラメータのクエリパラメータがすでに存在する場合は、そのパラメータを新しい値に変更します。

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

私は次のJavaScriptライブラリを使用して大きな成功を収めました。

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

HTML5履歴APIと、古いブラウザーのフォールバックメソッド（＃を使用）をサポートしています。

このライブラリは本質的に `history.pushState 'の周りのポリフィルです。

Fabioの回答を改善し、ページをリロードせずにURL文字列にカスタムキーを追加する関数を作成したいと考えています。

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

次に、履歴APIはまさにあなたが探しているものです。レガシーブラウザもサポートする場合は、ブラウザが履歴APIを提供していない場合に、URLのハッシュタグの操作にフォールバックするライブラリを探します。