web-dev-qa-db-ja.com

戻るボタンで動的に変更されたHTMLを保持

驚くべきことです。私はこれが他のサイトで常に機能しているのを見ていますが、自分が取り組んでいるサイトでは決して見ません。

私はajaxで新しいコンテンツを持ち込んでいます。history.jsとHistory APIについて知っています。URLを変更したくないので、ブラウザに新しいHTMLコンテンツをキャッシュして、ユーザーがページを離れて戻ってくるときに[戻る]ボタン、まだ更新されたHTMLがあります。

URLを変更したりハッシュ＃を使用したりすることなく、他のサイトで常に機能していることがわかります。
動作させるためのトリックはありますか、それともブラウザによってランダムに決定されますか？
URLを使用してこの情報を取得したくない場合、簡単な代替手段はありますか？

htmlajaxfirefoxbrowser-historyhistory.js
47
Madd0g

約10年半の間、私はかつて痛みを伴う試行錯誤で発見した2つのトリックを使用してきました。入力フィールド値-特に「隠された」値-はURLとともにブラウザの履歴に保存されます-そして-onLoadイベント戻る（または進む）ボタンでページに戻るときに呼び出されます。

これは、非表示フィールド（フォームに保存することを忘れないでください）に、好きなだけ「状態」を保存し、「onLoad」の変更を「やり直し」できることを意味します。通常、「レンダリング」部分を別の関数にします...つまり、動的性が発生しているときに、まず非表示フィールドに書き込み、次にレンダリング関数を呼び出します。次に、さまざまな動的性のさまざまなレンダリング関数をすべて集めて、onLoadから呼び出します。

私はこれをマニュアルで探したことがないことを強調します-保証はできません-しかし、私はしばらくの間それを確実に使用してきました（Netscape !!!以来）これは「多くの」ブラウザ（すべてのIEで動作します） 、クロム、FF-しかし、他のものについては、私は試したことがない。）

誰かがより「正しい」-退屈でない-方法を持っているなら、私にとっては、それについて聞いてとてもうれしいです。しかし、これはトリックを行うようです。

41
Groover

RESの作成者は、/ r/javascriptで質問を見つけました

どうやら、Firefoxは最近、これを単独で行う機能を追加しましたが、ブラウザがあなたのためにそれをしない場合、これを行う「良い」方法はありません。

RESは、＃page = nマーカーを追加します（nはページ番号）。そうすることで、RESはページロード時に、すでにlocation.hashがある場合は戻るボタンから来たに違いないことを認識します-残念ながら、この特定の動作はFirefoxとChromeの両方でctrl-f findを中断しました=ハッシュの変更によりユーザーを悩ませる検索ダイアログが閉じられるため、検索により別のページにスクロールした場合（ページ= n + 1）...

したがって、RESは、戻るボタンを使用してページに到達したかどうかを推測するために、someい不完全な体操を行います。新しいページを読み込むたびに、その番号がsessionStorage（localStorageのように、ただしタブに対してローカル）に保存され、[戻る]ボタンを介して表示されると、そのページ番号のリクエストが実行されます。

ただし、最近FFおよびChromeでテストし、ハッシュの変更によってctrl-fの検索ダイアログが「キャンセル」されなくなったため、それを使用することをお勧めします。ハッシュが存在する場合、そのハッシュによって決定された関連データをロードします。

本当に夢中になりたい場合は、実際のHTMLコンテンツをlocalStorageに保存し、ページの読み込み時に[戻る]ボタンを使用して再読み込みすることもできます。これは物事を行うのに最も効率的な方法ではないかもしれませんが、DOMに依存しているjavascriptと競合する可能性がほぼ確実にあります。

「最適な」ソリューションは、実際にサイトが何をしているか、そのコンテンツがどのように見えるか、どのように動作するかによって異なります。

9
honestbleeps

次のようなHistory.jsを使用して目標を達成できます。

function manageHistory(data){

    var History = window.History;
    if ( !History.enabled ) { return false; }        
    History.replaceState({myData: data}, null);
}

$('select.select').change(function(e) { // I am using select tag here to give an example of an HTML action triggerer

    e.preventDefault(); 

    // get data from your select tag

    manageHistory( data)


});

History.Adapter.bind(window, 'statechange', function() { 
    var State = History.getState();

    // Launch the ajax call and update DOM using State.data.myData
});

Mozillaサイトの履歴に関するドキュメントによると、PushStateの3番目のパラメーターは次のとおりです。

URL — .......このパラメーターはオプションです。指定されていない場合は、ドキュメントの現在のURLに設定されます。

1
Adib Aroui

その理由は、他のWebページがセッションを提供するバックエンドサーバーを使用しているためだと思います。

静的なhtml/jsページを構築している場合、そのようなセッションはなく、ページがリロードされるだけです。

Cookieを使用して、目的を達成できます。

0
el vis

ローカルストレージは1つの方法であり、別の方法はサーバー側の永続性です。

HTMLが編集/作成され、クライアント側で一部のプロパティが変更されると、ページの状態の変更をレストフルAPI（または同等のもの）を介してWebストレージまたはデータベースと同期する必要があります。

ページに戻ると、ページはローカルストレージから保存された情報を取得できます...サーバー側の永続性を使用している場合、セッションCookieと組み合わせて使用​​し、ユーザーの状態の変更を取得する必要があります。その後、サーバーからロードできます。

0
1nfiniti