2

<input>HTML ページに要素があるとします。値を入力し、別のページに移動して戻ると、通常、その値が復元されます。

1) Firefox では、BFCache によりページ全体の状態が復元されています: https://developer.mozilla.org/en-US/docs/Working_with_BFCache。(つまり、実行中のスクリプトの状態も復元されます。)

2) Chrome では、高速ページ キャッシュが機能していないように見えますが (そのため、ページは元の状態にリセットされます)、入力フィールドの値は保持されています。

スクリプトによってフィールドを動的に追加する<input>と、Firefox では値が復元されます (すべてが復元されているため)。

ただし、Chrome では、<input>フィールドを作成する Javascript を再度実行する必要があるため、この入力フィールドはエンジンにとってまったく新しいものとして表示され、値が復元されません。

したがって、私の質問は次のとおりです。動的に生成され<input>た s を使用して Chrome の機能 2) を実装する方法 (または、入力フィールドの ID に関するヒントを Chrome に与える方法)。

(私がこれらすべてに興味を持っている理由の 1 つは、提案されているカスタム要素です: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html。これまたはポリフィルを使用してhttps://github.com/mozilla/web-components/blob/master/src/document.register.jsまたはhttps://github.com/Polymer/CustomElementsは、大量の (入力) を作成することを意味します。要素をプログラム的に実装し、優れたユーザー エクスペリエンスを得るには、組み込み要素として機能する必要があります)。

4

1 に答える 1

1

私が考えた 1 つの回避window.history.replaceState策は、input 要素の値が変更されるたびに使用して、ブラウザーの履歴に保存することです。しかし、replaceState を繰り返し呼び出す必要がないように、ブラウザーのオートコンプリート機能に直接フックできるかどうか疑問に思っています。

<input>別の回避策があります: 動的に生成された入力の値を (変更されるたびに) 履歴 API を使用してブラウザー履歴に保存する代わりに、ページの状態を保持し、ブラウザーの状態に依存する 1 つの静的隠しフィールドを作成できます。価値を取り戻す力。

<input>現在のセッションの履歴エントリに保存される変更を検出するためにフィールドで入力イベントを使用する代わりに、pagehideイベントをリッスンして現在の値を保存することもできます。これにより、パフォーマンスが少し向上する可能性があります。ただし、これは非表示の入力フィールドに状態を保存する場合には機能しません。これは、pagehide イベントの後の変更は (少なくとも Chrome によって) 破棄されるためです。

于 2014-04-14T23:00:11.317 に答える