4

私はjqueryを初めて.ready使用し、ブラウザの[戻る]ボタンを使用してページに戻ったときに、関数内のコードが常に実行されるとは限らないことに気付きました. stackoverflow に関する 2 年前の投稿を読むと、すべてのブラウザーが同じように機能するわけではなく、単一の jquery 関数で問題を解決できるわけではないようです。今でもそうですか？ページが初めて実行されているか、ユーザーが [戻る] を押した後に再度表示されているかを検出するための (2012 年に!) 最良の方法は何ですか?

明確にするために: 赤いテキストのページがあり、クリックすると単語が javascript/jquery で青に変わると想像してください...新しい URL に移動して [戻る] を押すと、次のようになります:
Firefox - 単語がまだ残っている青の
IE/Chrome - 単語が赤に戻った

Firefox
Firefox や他の一部のブラウザはpageshowandpagehideイベントを実装していreadyて、「bfcache」からページを表示するときにイベントを発生させないことを理解しています。この関数内でevent.originalEvent.persisted 、状況を確認できます。

IE/Chromeページが IE/Chrome で初めて読み込まれるかどうかを追跡するために使用する
1 つのトリックを認識しています。<input type="hidden" id="dirty">これがどれほど信頼できるかはわかりません。私は推測するクッキーを試すこともできます。

全くの無知ですみません…

編集：なぜそれをするのですか？
私自身の状況を説明するにはかなりの時間がかかりますが、同じ問題を抱えたばかげた例を次に示します。10 枚のトランプが表示されているページをイメージしてください。ユーザーはカードを選択して画面上で上に移動させることができます。カードを選択すると、カードの詳細をサーバーに送信する ajax リクエストが起動します。ここで、別のページに移動し、BACK を使用してそのページに戻るとします。3 つのことが起こります:
1. ブラウザはサーバーを呼び出してページを取得し、サーバー (データベース) はどのカードが選択されたかを認識しているため、関連する HTML/スクリプトを出力できます
2. Firefox は bfcache を使用してページを表示します - DOM の状態が正確に保存されているため、選択したカードは引き続き選択されます (上に移動します) (readyイベントはヒットしません)。
3. IE/Chrome は元の HTML をキャッシュからリロードし、readyイベントのスクリプトを呼び出します。すべてのトランプが「選択されていない」位置に表示されます。選んだカードが失われました！

4

2 に答える 2

0

ページのダウンロードが完了すると、ready 関数が初期化されます。履歴をさかのぼると、既に読み込まれた状態のページに戻ります。コードが関数内にあることを確認して、次のようなイベント ハンドラーにアタッチできるようにします。

//A function to execute
function updateCardDeck() {
 ...
};

//The event call bind
window.addEventListener('pageshow', updateCardDeck, false);

これはおそらく履歴参照アクションの後に使用するイベントであり、window.ready イベント内ではなく、HTML マークアップの最後に配置する必要があります。

于 2013-10-30T16:40:33.170 に答える