問題タブ [pushstate]

HTML5の履歴について学習しています。この例では（JavaScriptブラウザーコンソールを開いてエラーを確認してください）、次の結果event.state.urlが返されます。

見て助けてください：http：//jsfiddle.net/un4Xk/

AJAXでいくつかのページを更新しているので、次のコードで履歴を更新しています-

次に、ページの読み込み時にこの onPopState 関数を呼び出しています -

コンテンツが AJAX を介して生成されたページから通常の方法で読み込まれたページに移動するときに戻るボタンを使用しても、少し問題があります。URL は変更されますが、ページはリロードされません。もう一度戻るをクリックすると、予想どおり前のページに移動し、次に進むことは正常に機能します。戻るボタンが機能しないのは、その 1 つの状況だけです。

ここでの提案は大歓迎です。

私はChrisWanstrathのjqueryPjaxプラグインを使用しています。別名、Defunkt、ここでデモを行います：http: //pjax.heroku.com。

デモとまったく同じように機能します。ただし、pjaxリンクの頻繁なクリックやブラウザの戻る/進むボタンと相関しているように見える場合があります。レイアウトファイルがjqueryにアクセスできなくなり、pjax（）機能が機能しなくなります（つまり、選択したhrefのページ全体の読み込みが発生します） 。

これが単なるブラウザのJavaScriptエンジンの速度低下（chromeとfirefoxの両方、およびxampp localhostとpjax.heroku.comで発生）であるかどうか疑問に思っていました。クリックイベントとajax呼び出しが多すぎると、ブラウザが混乱し、すでに読み込まれているものが無視されます。 javascript（つまり、jquery）。

この仮説が意味をなすかどうかはわかりませんが、現時点で無計画と思われることについて他に説明はありません。

どんな考えでも大歓迎です、ティム

私はjsに関してはほとんど初心者なので、本当に単純なものが欠けていたらごめんなさい。

基本的に、history.pustate と popstate の使用についていくつかの調査を行い、URL の末尾に ( ?v=images) または ( ?v=profile)...( v「ビュー」を意味する) クエリ文字列が追加されるようにしました。これ：

関数を使用して行ったページをリロードせずに、コンテンツを div にロードできるようにしたいと考えてい.load()ます。

次に、このコードを使用しました：

$(document).ready()セクション以降で<script>タグだけで試してみましたが、どちらも機能しませんでした。

戻るボタンを使用するとコンテンツが変更されるようにする方法がわかりません。または、少なくともそれを作成して、独自の機能をトリガーできるようにします。状態オブジェクトと関係があると思いますか?! プロセスを明確に説明しているものをオンラインで見つけることができないようです。

誰かが私を助けることができたら、それは素晴らしいことです。

まず第一に、私がしていることや期待していることが正しいかどうかは完全にはわかりません。これに関するドキュメントはあまりないようですが、私が読んだことは、これが機能するはずであることを示唆しています。

history.pushStateを使用しようとしたときにいくつかの問題が発生したため、何が問題になっているのかを確認するためのデモページを作成することになりました。

[新しい状態]リンクをクリックすると、コンソールにonpopstate関数が実行され、新しいURL（test / [number]など）が表示されることを期待しています。

Chromeのアドレスバーの場所は更新されますが、onpopstateイベントは発生しません。次に、ブラウザの[戻る]ボタンをクリックすると、複数のポップステートイベントが発生しているように見えます。ブラウザのナビゲーションボタンを使用するたびに、発生するはずのすべてのpopstateイベントが一度に発生しているようです。

これを説明するのはちょっと難しいです。これが私がコンソールに表示することを期待しているものです。

ページをロードします。Chromeは、ページの読み込み時に最初のpopstateイベントを発生させます

popstate.html：132011年11月19日土曜日16:23:48 GMT + 0000（GMT標準時）

popstate.html：14http：//example.com/popstate.html

「新しい状態」リンクをクリックします。アドレスバーの場所がhttp://example.com/test/0.06458491436205804に更新されます。

2011年11月19日土曜日16:23:53GMT+ 0000（GMT標準時）

popstate.html：14http：//example.com/test/0.06458491436205804

ブラウザの戻るボタンをクリックします。アドレスバーのURLは/popstate.htmlに戻ります

popstate.html：132011年11月19日土曜日16:26:27 GMT + 0000（GMT標準時）

popstate.html：14http：//example.com/popstate.html

それが私が期待していることです。これが私が実際に見ているものです...

ページを読み込む

popstate.html：132011年11月19日土曜日16:27:42 GMT + 0000（GMT標準時）

popstate.html：14http：//example.com/popstate.html

新しい状態のリンクをクリックします。コンソールには何も表示されません。アドレスバーが/test/0.5458911096211523に変わります

ブラウザの戻るボタンをクリックします。アドレスが/popstate.htmlに戻ります

popstate.html：132011年11月19日土曜日16:27:42 GMT + 0000（GMT標準時）

popstate.html：14http：//example.com/popstate.html

popstate.html：132011年11月19日土曜日16:28:57 GMT + 0000（GMT標準時）

popstate.html：14http：//example.com/popstate.html

ご覧のとおり、最初のpopstateを繰り返し、/ popstate.htmlに戻ることを示していますが、プッシュされた状態に対しては起動しません。ブラウザで前方に押すと、次のようになります。

popstate.html：132011年11月19日土曜日16:27:42 GMT + 0000（GMT標準時）

popstate.html：14http：//example.com/popstate.html

popstate.html：132011年11月19日土曜日16:28:57 GMT + 0000（GMT標準時）

popstate.html：14http：//example.com/popstate.html

popstate.html：132011年11月19日土曜日16:29:58 GMT + 0000（GMT標準時）

popstate.html：14http：//example.com/test/0.5458911096211523

（それらはすべて再び表示されます。スクリーンショットは次のとおりです：http：//img.ctrlv.in/4ec7da04e20d3.jpg）

間違っているのか、期待が間違っているのか、それとも実際にはバグなのかわかりません。

このすべてを読んで、私のためにそれに光を当てることができる人に事前に感謝します。

Backbone.jsを使用して、ルーターを元のページに移動させることはできますか？ポップアップが表示されたときにURLを変更し、ポップアップを非表示にしたときに元に戻したい場合に使用したいと思います。ポップアップを表示する前に残したのとまったく同じ位置に背景ページを保持したいので、単純に戻りたくありません。

次の問題を解決したいと思います: Web ページ上のリンクが与えられた場合、指定されdivた要素のコンテンツdivを別のページの要素のコンテンツに置き換えたいと考えています。たとえば、「巨人の肩に立つ」というテキストを Google Scholar ページから既存のdiv要素にロードするだけです。

次の例が実装されている場合は最新です。

window.historyロケーション バーの URL を変更し、ユーザーが新しいコンテンツなしで Web ページの以前の状態を復元できるようにするために、これを含めました。

今、私は2つの問題があります：

• <code>div</code>WhatIsMyIP のページ全体が読み込まれるため、要素の置換は機能していないようです。
• Chrome を使用している間、ページ全体が最初から何度もリロードされます。window.onpopstateイベントは継続的にトリガーされると思います。

助けてくれてありがとう！

ブラウザの履歴を処理する満足のいく方法が見つかりません。確かにHistory.jsのような素敵なプラグインがあります。しかし、例を挙げましょう：

ユーザーにさまざまなことを尋ねる複数ページのフォームがあります。次のページに送信するたびに (実際には同じで、HTTP-POST 変数に応じてビューが変わるだけです)、ページにいくつかのアニメーションと変更があります。

• メインコンテンツは次のフォームに変わります (slideUp/slideDown を使用)
• プログレスバーの状態がアニメーションで変わります
• このバーの下に、入力の一部に関する情報がフェードインします

今はかなり基本的なことですが、すべてのアニメーション (最後の 2 つの部分) がすべての状態 (異なる div、異なる入力ソース) で異なり、それらを非常に一般的なものにする方法がわからないため、私はすでに苦労しています。それらを個別に指定する必要はありません。

私はそれを受け入れることができましたが、ユーザーが戻るボタンを押すと、それらすべてのアニメーションを再度 (逆に) 再定義する必要があります。content-load は確かに問題ありません。基本的には ajax-load でファイルをリロードするだけです:

• pushstate入力データをstateObj送信時に実行します
• そのため、バインドされた「statechange」イベントで content-load を実行できます

言ったように、残りは私を狂わせます。

私はたくさんのチュートリアルと例を読んで役に立たなかったので、ここで質問しました。動的コンテンツ div を使用して、サイド ナビゲーションが固定された Web ページを開発しています。

問題

リンクをクリックすると、「ロード」としましょう。コンテンツ div には、他のページ「loadcourses.php」のコンテンツが表示されます。その後、履歴 API を使用して、URL を「http://mydomain.com/main」に変更します。 php?page=loadcourses'. 基本的に main.php は変更されません。他のページのタイトルを追加して、リンクの背後にあるパラメーターとしてタグ付けするだけです。

次に、動的に読み込まれたコンテンツから、クリックすると個々のコースのコンテンツを表示するリンクがいくつかあります。重要な部分はここにあります。リンクをクリックすると、「course.php」である次のページへの別のパラメーターを解析することになっています。href='http://mydomain.com/course.php?cid=CSC101' を設定しました。これで、動的 div がコンテンツをロードし、次のページで ID CSC101 を正常に取得することで、初めて問題なくロードできます。しかし、更新を押すと、cid が失われます。

戻る/進むボタンは、履歴 API に従って正常に機能します。ここで助けが必要です、ありがとう!! 私は現在、この .jsp プロトタイプに取り組んでいます。