6

これで私を助けようとする人に前もって感謝します。

appendChild()一連の基準に基づいて、ユーザーが選択できる選択肢として、チェックボックスを追加するフォームがあります。

ユーザーがこれらのボックスのいずれかにチェックを入れ、[続行] ボタンをクリックして選択内容を別のページに投稿し、[戻る] ボタンをクリックすると、ユーザーがチェックしたチェックボックスはブラウザーに忘れられます(もはやチェック済み）。

PHPを使用してチェックボックスを作成するか、単に静的チェックボックスを使用すると、ユーザーがこれらのボックスのいずれかをチェックしてから「続行」ボタンをクリックして選択内容を別のページに投稿し、[戻る]ボタンをクリックすると、選択したチェックボックスが記憶されます（まだチェック済み）

私の質問は：

appendChild()でチェックボックスを作成するときに、ブラウザーがユーザーの選択を忘れるのはなぜですか?

それでも同じブラウザは、静的チェックボックスを使用したときにユーザーが行った選択を記憶します

同じブラウザがチェックされた選択を記憶できないのは、appendChild()とは何ですか?

[div id="mydiv"] here is where the checkboxes are going[div]


[script type="text/javascript"]

var newInput = document.createElement("INPUT");
newInput.id = "mycheckboxid";
newInput.name = "mycheckboxname";
newInput.type = "checkbox";

document.getElementById('mydiv').appendChild(newInput);

[/script]
4

2 に答える 2

6

ブラウザーは、DOM への動的な変更を「忘れる」可能性があります。これは、ブラウザーが異なれば、Web ページをキャッシュするための戦略も異なるためです。戻るボタンを押すと、ブラウザーは元の Web サーバーからページを再要求するのではなく、キャッシュされたコピーを表示できるという考えです。

これは、(少なくとも) 2 つの方法で実現できます。

  1. ブラウザーは、ページを離れるときにページの DOM 自体をキャッシュします。再度アクセスすると (前方または後方)、動的な変更が持続します。
  2. ブラウザーは、読み込み時 (動的変更の前) にページの元の HTML のみをキャッシュします。これには、これらの動的な変更が失われるという効果があります。DOM へのさらなる変更は記録されappendChild()ませinnerHTMLん。

一部のブラウザーは、変更されたフォーム データをさらに保持し、他のブラウザーは保持しないことに注意してください。目標がすべてのブラウザーで 99% 以上の互換性を維持することである場合は、やるべきことがいくつかあります。

これを回避するには、何らかの方法で状態を永続化する必要があります。いくつかのオプションがあります:

  1. ページの変更に関するデータをlocalstorageに保存します。最初のページの読み込み時にランダムに生成され、ページに保持されるキーを使用して、状態の変更がページのそのインスタンスにのみ適用されるようにします。ページの読み込み時に、このキーが既に存在する場合は、変更データを読み取り、変更を再適用します。古いブラウザはローカル ストレージをサポートしていません。

  2. 前のことを Cookie で行います。Cookie が増殖するという欠点があるため、これはお勧めしません。Cookie はすべてのリクエスト (ajax のものを含む) で送受信されるため、すべてのリクエストで送信されるデータが肥大化します。古いブラウザはこれで問題なく動作します。

  3. 動的変更モデルを放棄し、サーバーへのポストを通じて変更を発生させます。次に、ブラウザのキャッシュから取得すると、変更された html がページに含まれます。あなたはおそらくこれを望んでいないでしょうが、私は完全を期すためにそれを指摘したいと思いました.

  4. 舞台裏で ajax を介してページの変更に関するデータをサーバーに保存します。これは、前の項目のように各変更を実際に往復することと同じではありません。引き続き動的に変更を行いますが、「アドバイス」ファイルをサーバーに投稿します。次に、ページが読み込まれるたびに、サーバーから調整データを要求します。これは最初の提案と似ていますが、リモート サーバーをストレージとして使用しています。これにより、ページの読み込みごとに余分なネット トラフィックが発生しますが、トラフィックは最小限に抑えることができます。ページ。また、通常は送信されない余分なネット トラフィック (アドバイス データ) も発生させます。ただし、巧妙なシステム アーキテクチャでは、この情報を使用して、ユーザーの未送信のフォーム データを複数のコンピューター間で永続化することができます。これは非常に便利な方法です (たとえば、ユーザーが 200 問のアンケートのうち 199 問を回答したとします。アウト--このスキームを使用すると、後で中断したところから正確に続行する可能性があります!)。

  5. [続行] ボタンで新しいブラウザ ウィンドウを開き、元のページをそのまま保持します。

  6. ページを離れることなく [続行] ボタンでデータを投稿し、データをそのまま保持します。シンプルなライトボックス スタイルのオーバーレイを作成できます。

  7. ライトボックス スタイルのオーバーレイが機能せず、実際に新しいページを表示する必要があり、それを新しいウィンドウに表示したくない場合は、サイトを再設計して gmail と同様に機能するようにします。ページは JavaScript によってのみ変更され、 URL の末尾に #hash タグを使用して動作を制御します。これは難しいかもしれませんが、それを実現できるライブラリがあります。（一部のブラウザーでは、ハッシュタグが変更されたかどうかを確認するためにポーリングに頼る必要があります。）基本的な考え方は、同じページを指しているが、ブラウザーなどのタグが付いているリンクをクリックすると<a href="#about">About</a>、ページの読み込みが開始されるというものです。イベント、および新しいコンテキストを履歴の前方/後方スタックにプッシュしますが、実際には新しいページをロードしません. 次に、更新された URL のハッシュ コード (ある種のコマンドにマップされる) を解析し、それを実行します。各リンクの適切なハッシュ コードを慎重に選択することで、適切なページを Javascript で動的に表示および非表示にすることができ、ユーザーが実際の Web サイトをナビゲートしているかのように表示されます。これをすべて行う理由は、ページが読み込まれないため、Javascript で状態を維持できるだけでなく、DOM の状態も維持できるためです。ユーザーによって変更されたページを非表示にするだけで、そのページに再びアクセスすることを意味するイベントが発生し、それを表示すると、ユーザーがそのページを離れたときとまったく同じになります。利点: サイトの操作に Javascript が必要な場合、それを実現するためにさらに多くの Javascript を使用しても、リスクを冒す必要はありません。不利益：サイトのアーキテクチャを完全に変更するのは大変な作業であり、古いブラウザで作業するのは難しい場合があります. これを開始するには、次を参照してください。一意の URL。jQuery hashchange プラグインを試すことができます。Web サイトが広く配布されている場合は、検索エンジンの最適化と Web の使いやすさの問題に確実に対処する必要があります。戻るボタンのハッシュ変更の検出に関するこの SO ページをご覧になることをお勧めします。

  8. 前のポイントと同じ戦略を使用しますが、ハッシュタグを使用する代わりに、新しい HTML5history.pushState()とhistory.replaceState()メソッドを使用します。Mozilla browser historyを参照してください。

使用中のブラウザの 99% で 99% の互換性が目標でない場合は、近道が可能な可能性があるため、目標をお知らせください。

更新: オプション #8 を追加

于 2012-11-23T20:59:42.013 に答える
0

ページのスクリプト作成は、状態管理にとどまりません。これには状態管理が含まれます。

これは、スクリプト化されたページ遷移 (内部的にナビゲートするページ)、コンテンツ ペイン、ポップオーバー メニュー、スタイルの変更などのスクリプト化された状態変更を意味します。もちろん、フォームの入力と選択はすべてスクリプト作成者の責任です。

ですから、なぜ..それは、スクリプト化したページの状態を管理していなかったからです。

期待どおりにページを機能させたい場合は、自分でスクリプトを作成してページ状態の変更を管理し、ページを管理する js ライブラリを使用するか、場合によってはフォーム、状態を管理するか、http(s) クライアント/サーバーを使用します。状態管理を行い、サーバーでセッション状態、またはあなたの場合はフォーム状態だけをロードします。

于 2016-06-14T14:52:44.023 に答える