問題タブ [popstate]

データベースから動的コンテンツをロードする関数があります。特定のリンクがクリックされたときに呼び出されます。

jQuery

pushStateと を有効にしたいですonpopstate。

上記の行のコメントを外すことで、URL とブラウザーの履歴の変更を有効にすることができますhistory.pushState。複数のページ間で前後にナビゲートすることは正しく機能します。

しかし、これはコンテンツをロードしません。

しばらく前に、次の要素を追加することで、完全な機能 (つまり、ナビゲーションとコンテンツの読み込み) が得られたと思います。

したがって、それらを別のブロックに追加しようとしました：

しかし、これにより、ナビゲート時のページ範囲が 1 つに制限され、前方にナビゲートできなくなります。

上記のコードをベースとして使用して、ナビゲーションとコンテンツの読み込みの両方を実現するにはどうすればよいですか?

編集

参考までに、正しいパスはブラウザーの履歴にあります。ナビゲートできず (FF と Chrome)、対応するコンテンツが読み込まれていません。Firebug にエラーはありません。

popstate と pushState を試していますが、ページ外のナビゲーションをどのように処理するのか疑問に思っています。

何かをクリックすると「新しいページ」を生成するインデックスページがあり、それが ajax でロードされているとしましょう。popstate で URL を変更します。ロードされたページには、現在の「インデックス」ページの外に出るリンクがあります。誰かが押し戻すと、ダンプされた状態オブジェクトが取得されます。

pushState 中に指定された URL を実際にロードするようにするにはどうすればよいですか?

前もって感謝します。

サイト内のリンクをクリックすると、主要なブラウザーでは機能しますが、IE9 以下では機能しません。リンクをクリックしても何も起こりません! コンソールには、「event.returnValue は非推奨です。代わりに標準の event.preventDefault() を使用してください。」と表示されます。

私はこのウェブサイトからこのメソッドを使用しています: http://sudojesse.github.io/dynamic-page/index.html

このWebサイトをIE9以下で使用すると機能します（ページを更新すると機能しますが、機能します！）。私は何を間違っていますか？

編集:すべてをサブフォルダーに入れると機能します! それはhtacessの何かでしょうか？

関数を使用しようとしましpopstateたが、エラーが発生しました: Uncaught RangeError: Maximum call stack size exceeded

ステップバイステップ：

ステップ 1: をクリックしましたli。addToHistory() はうまく機能します。

ステップ 2 :backtohomeボタンをクリックしました。addToHistory() はうまく機能します

ステップ 3 : 進むボタンをクリックしてバインドwindow.popstateし、その行window.locationで無限ループが発生しました。そして、次のページが見えません。

私の機能の何が問題になっていますか?

ナビゲーション リンクがクリックされたときにメイン div のコンテンツを置き換える単一の Web ページを作成しようとしています。pushstate 関数を実装して、div コンテンツを置き換え、URL アドレスを簡単に変更することができました。popstate 関数で戻る/進むボタンをクリックすると、コンテンツを更新することもできます。ただし、最初のリンクをクリックすると正常に動作し、次のリンクをクリックすると、2 つのプッシュステートが適用され、3 回目のクリックで 3 つのプッシュステートが適用されるように見えます。は。複数のプッシュステートが発生するのを防ぎ、履歴に重複しないようにする方法についてのアドバイスを探しています。

HTML コード:

Javascript

Sebastian Sulinki によって作成された例をしばらく見回していました

here' デモ - http://html5-history-pushstate.ssdtutorials.com/ 完璧ですが、window.onpopstate = function(){

Firefox およびインターナー エクスプローラー 11 および 10 では、ドキュメントの準備完了またはウィンドウの読み込みでは機能しません。他のブラウザーではトリガーされます。

ドメイン スクリプトが動作しないため (デモ)、ドメイン スクリプトは domain.com/ でのみ動作し、server.com/folder/ は動作しません。申し訳ありませんが、無料のドメインはありません。

しかし、誰かがそれをもう少し調査したい場合は、ダウンロードして localhost/ (下位フォルダーではなくメインディレクトリ) またはいくつかのドメインで試してください。

それを確認する簡単な方法はconsole.log("this url is " + url);、スクリプトのこのフラグメントに追加することです

#navigation aクロムでウェブサイトを開くと、開始時にURLが表示されますが、FFとIEでは、ボタンを押してからスクリプトトリガーを押すまで何も表示されません。

使用された時間と、アンサー、ヒント、情報をありがとう:)

編集: 私はここ(下のリンク)でそれがトリガーされないことを知りました-しかし、なぜですか? 解決策はありますか？ http://blog.teamtreehouse.com/getting-started-with-the-history-api

他の人が以前にこの問題に遭遇したと確信していますが、これは私の頭を悩ませています.

製品のリストを生成するページがあります。これは長いリストなので、数ページにわたる場合があります。これを実現するための [戻る] ボタンと [次へ] ボタンがあり、ユーザーがリストにとどまっている場合に機能します。

この問題は、ユーザーがリストから製品を選択し、別のページに移動して製品の詳細を表示するときに発生します。ユーザーがこのページを終了して終了すると、ユーザーがページを離れた時点で製品のリストが再表示されます。

クロムでは、popstate が起動され、正しい前のページに移動するために戻るボタンを取得するために、次の popstate で必要なゴーバックの数を調整する必要があります (既に実行した pushStates のため)。Firefox では、ページがキャッシュから復元されており、リターンを傍受して必要な調整を行う機会が与えられていません。

製品詳細ページから [戻る] ボタンまたは [終了] ボタンが選択されたときに、Firefox に強制的にキャッシュをクリアさせて popstate をトリガーさせる方法はありますか?