問題タブ [popstate]

AJAX 経由でコンテンツを提供するサイトに取り組んでいます。

メニューのアイテムをクリックすると、コンテンツ div が$.get応答で更新されますが、特別なことは何もありません。

history.pushStateブラウザの戻る/進むボタンでナビゲーションできるように実装しています。

履歴ナビゲーションにコンテンツをロードするには、次のものが必要です。

問題は、ページが初めてロードされるときに、この関数が$.getScriptページをすぐに再度ロードすることです。ページが最初にロードされると最初の HTML ビューがレンダリングされ、2 回目のロードでは JS ビューがレンダリングされます。これは JS リクエストであるためです。

HTML リクエストのあるページでこのイベントが発生しないようにするにはどうすればよいですか?

新しいプロジェクト内でjQueryティッカーの1つを使用しており、ページはHTML5 History API（pushStateおよびpopState）を使用して読み込まれます。jQuery.getJSON（）を使用してページのコンテンツが読み込まれると、「要素がDOMに存在しません！」という警告が表示されます。-そして、コンテンツがロードされた後は機能しないため、ティッカーコンテナ（ajax呼び出しの後に返される）を参照していると思います。

jQuery.getJSON（）のコールバック関数でティッカーを再度インスタンス化しようとしましたが、問題は解決しませんでした。

解決策は何でしょうか？

Chromeの場合、イベントはページの読み込み時に発生しますが、Firefoxでは、戻るボタンまたは進むボタンを押した場合にのみ、イベントが正しく発生します。では、すべてのブラウザで正常に機能するスクリプトを作成するにはどうすればよいでしょうか。

私はAjaxスタイルのウェブサイトを作成したい小さなプロジェクトに取り組んでいます。コンテンツはjQueryで読み込まれload()ます。ご存知の方もいらっしゃると思いますが、これの欠点は、表示されるコンテンツに応じてURLが変更されないことです。この作業を行うには、を使用できますpushState()。これはクロスブラウザでサポートされていないため、プラグインを使用しましたhistory.js。

これは非常にうまく機能していますが、問題は、戻るボタンと進むボタンが正常に機能しておらず、何が間違っているのかわからないことです。URLは正しく変更されており、コンテンツも変更されていますが、タイトルはまったく変更されていません。タイトルとは、ブラウザウィンドウのウィンドウ（またはタブ）のタイトルとして表示されるものを意味します。つまり<title>、ロードされたページの、またはそのページを参照するリンクのタイトル属性（これらは同じです）。タイトルが必要なページのセクションのみを呼び出すという事実と関係があると思います（つまり、に追加#contentすることによってload()）。それでもそのページのタイトルが欲しいです。これが私が今まで持っているもののテストケースです。（2013年12月28日以降は使用できなくなりました。）jQueryファイル：

また、基本ページ（つまり、/ sectionLoaderTest /）に戻ると、最初のページのコンテンツが読み込まれるまでしばらくの間空白になることにも注意しました。これを最適化する方法はありますか？

さらに、jQueryを使用して、クリックされたリンクにアクティブクラスを追加しています。これが履歴に応じて変化することをどのように確認できますか？ユーザーが戻ったときに正しいリンクが強調表示されるようにするには？

したがって、3つの質問は次のとおりです。

1. 前後に移動するときにタイトルを機能させる
2. メインページの読み込み時間を最適化する
3. 前後に移動するときにアクティブクラスを修正する

すべての助けを歓迎します！

注1：history.jsと自分のスクリプトを基に構築したいので、< HTML5ブラウザーのサポートを維持します。1.これが機能しなければならないことはわかっていますが、何か問題が発生しています。2.まったく新しいスクリプトを考え出すのではなく、自分の解決策を見つけて、すでに作成したスクリプトに実装できれば、時間を節約できます。

注2：バウンティは私のすべての質問に答えることができる彼または彼女にのみ与えられます（3）！

私はpjaxを使用して小さなサイトで動作するようにブラウザの戻るボタンを進めようとしており、クラスの変更とさまざまなオーバーレイのフェードインおよびフェードアウトを処理するための次のコードを考え出しました。

しかし、ChromeとSafariは最初のページの読み込みをポップステートとして扱うため、私は悲しみを感じています。これを止める方法はありますか？

私はこのようなものを持っています:

クロムでは魅力のように機能しますが、FF では機能しません (イベント ハンドラーが起動されません)。このコードを準備完了ブロックの外に出すと、イベントを処理できますが、準備完了ブロックの外にあるのは好きではありません。

解決策を知っていますか？乾杯。

Safari 5でpopStateがトリガーされたときにwindow.history.stateオブジェクトにアクセスできないようです（ページが戻ります）。このコードは、Chrome19とFirefox12で完全に機能します。

Safari 5のconsole.log（window.history.state）は、「undefined」を返します。

私のウェブサイトのパフォーマンス/応答性を改善するために、AJAX、replaceState、pushState、および popstate リスナーを使用して部分的なページ読み込みを実装しました。

基本的に、ページの中央部分 (HTML) を状態オブジェクトとして履歴に保存します。リンクがクリックされると、サーバーにページの中央部分のみを要求し (これらの要求を別の Accept ヘッダーで識別します)、それを JavaScript に置き換えます。popstate で、前の中央部分をつかみ、dom に押し戻します。

これはほとんど問題なく動作しますが、私が立ち往生している特定の問題を発見しました。説明するのが少し複雑なので、これがあまり明確でない場合は申し訳ありません。

ほとんどのページに検索フォームがあります。ajax による部分的なページの読み込みは GET リクエストでのみ行われ、フォームは POST を実行し、結果としてページ全体が読み込まれます。

次の一連のページをナビゲートすると、中央のコンテンツのみで構成され、周囲の DOM がまったくない不正な部分ページに行き着きます。

ホームページから開始 (ページ全体の読み込みを介して) - 検索を実行します (post-redirect-get)
検索結果に移動します (ページ全体の読み込みを介して) - 次に [ホーム] をクリックします
ホーム ページに戻ります (動的 get を介して) - クリックしますブラウザに戻る
検索結果 (popstate リスナーから) - ブラウザに戻るをクリックします
不正なホームページです。

不正なホームページが表示されると、popstate リスナーがまったく存在しません。

私が考えているのは、ホームページの 2 番目のロード (動的、部分的) がブラウザーによってキャッシュされており、ページ全体が戻ると、ブラウザーは完全なページではなく、キャッシュされた部分的な応答を表示するだけです。 .

これを改善するために、応答に Vary: Accept ヘッダーを追加して、accept ヘッダーに基づいてコンテンツが変更される可能性があることをブラウザーに知らせます。また、部分的に読み込まれたコンテンツに Cache-Control max-age=0、pragma no-cache、および過去の有効期限を追加して、ブラウザーがこれをキャッシュしないように強制しましたが、どれも解決しません。

残念ながら、私の会社は開発サーバーへの外部トラフィックを許可していないため、問題を示すことはできません。ここでさまざまな同様の質問を見てきましたが、まったく同じものはなく、提案された解決策も機能していないようです。

無意味なパラメーター (blah=blah) を動的 GET 要求に追加すると、問題が解決します。しかし、これは私がやりたくない醜いハックです。これはキャッシングの問題だと思うので、ヘッダーで解決できるようです。誰が何が起こっているのか説明できますか?

私が直面している問題は、分割などの関数を記述しようとするたびにGetAjaxPageBack関数にあり、他の関数は何もしません。行var url = url.split("?"); 正常に動作し始めていますが、なぜURLを分割してクエリ文字列を取得し、ajaxを使用して再送信してレコードを取得する必要があるのですか?

助けてください、ありがとう

一部のリンクは PJAX でラップされています。ユーザーが PJAX リンクをクリックすると、サーバーは HTML の必要な部分のみを返します。

私が次のことをした場合：

1. PJAXリンクをクリック
2. シンプルなリンクをクリック
3. 戻るボタンを押す

ブラウザーには、PJAX 要求によって返されたコンテンツが表示されます。表示されるのは HTML の一部にすぎないため、HTML は破損します (この質問を確認してください)。

PJAX 応答 (Cache-Controlヘッダー) をキャッシュしないことで、これを修正しようとしました。これで問題は解決しましたが、別の問題が発生しました。ユーザーが戻るボタンを押すと、WebKit (Chrome 20.0) がサーバーから完全なコンテンツをロードpopstateし、不要な PJAX 要求を引き起こすイベントを発生させます。

正しい戻るボタンの動作を再現することは可能ですか?