[解決済み] ページを再読み込みせずにクエリ文字列を変更する

質問

フォトギャラリーを作成しているのですが、写真を閲覧する際にクエリストリングとタイトルを変更できるようにしたいのですが。

私が探している動作は、連続ページ/無限ページの実装でよく見られるもので、スクロールダウンするとクエリ文字列がページ番号をインクリメントし続ける ( http://x.com?page=4 など）。これは理論的には簡単なはずですが、主要なブラウザ間で安全なものが欲しいです。

私が見つけたのは この素晴らしい記事 を使い、その例に倣おうとしていました。 window.history.pushstate が、私にはそれがうまくいっていないようです。そして、私はブラウザの履歴を変更することをあまり気にしていないので、それが理想的であるかどうかはわかりません。

ただ、写真が変わるたびにページを再読み込みすることなく、現在見ている写真をブックマークする機能を提供できるようにしてほしいです。

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

アップデイト がこの方法を発見しました。

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

解決方法は？

もし、あなたがHashの修正を探しているのなら、あなたの解決策は大丈夫です。しかし、クエリを変更したいのであれば、あなたが言ったように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