160

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

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

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

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

クエリ文字列を変更する無限ページの例を次に示します: http://tumbledry.org/

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

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

9 に答える 9

247

ハッシュの変更を探している場合、ソリューションは正常に機能します。ただし、クエリを変更したい場合は、あなたが言ったように、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

于 2013-10-09T18:05:05.540 に答える
7

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

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

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

このライブラリは、基本的に「history.pushState」のポリフィルです。

于 2012-06-10T16:12:59.377 に答える
0

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

于 2012-06-10T15:57:00.840 に答える