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

Question

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

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

私はthis great postを見つけ、window.history.pushstateの例に従おうとしていましたが、それは私にとっては効果がないようです。ブラウザの履歴を変更することに本当に関心がないので、理想的かどうかはわかりません。

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

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

UPDATEは、この方法を見つけました：

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

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

Answer 1

ハッシュ変更を探している場合は、ソリューションは正常に動作します。ただし、クエリを変更する場合は、前述のとおり、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履歴APIを処理できる最新のブラウザが必要です。詳細については

：ファビオの答えのオフ

http://diveintohtml5.info/history.html

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

Answer 2

その後、履歴APIはあなたが探しているものとまったく同じです。レガシーブラウザもサポートしたい場合は、ブラウザに履歴APIが提供されていない場合は、URLのハッシュタグを操作するためのライブラリを探します。

Answer 3

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

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

それはHTML5履歴APIだけでなく、古いブラウザ用（＃を使用して）フォールバック方式をサポートしています。

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

Answer 4

ビル、私はおそらくこの質問時につまずく誰のために有用であろう二つの機能を作成しました。これらの2つの関数を使用すると、キーと値を引数としてinsertParam()を呼び出すことができます。URLパラメータを追加するか、クエリーパラメータが既に同じキーで存在する場合は、そのパラメータを新しい値に変更します。

//function to remove query params form a url 
function removeURLParameter(url, parameter) { 
    //prefer 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 insertParam(key, value) { 
    if (history.pushState) { 
     // var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1'; 
     var currentUrl = window.location.href; 
     //remove any param for the same key 
     var currentUrl = removeURLParameter(currentUrl, key); 

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

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