0

私は現在、これに似た形式のWebページを持っており、サイドバーとiframeがあり、ソースは私のWebサイトの他のページを指しています。

ここに画像の説明を入力してください

ユーザーがページを離れたい場合の確認ボックスを提供するために、次のコードがあります。

window.onbeforeunload = function(e) {
    return 'All unsaved data will be lost.';
};

iframeには、テキストフィールド、入力ボックス、ボタンなどのさまざまなHTML要素があります。ユーザーがこれらの入力要素のいずれかを最初にクリックしない限りonbeforeunload、関数を取得したくありません。

もちろん、各テキストフィールドやボタンなどを手動でコーディングし、などの変数を作成してから、に設定し、最後にifステートメントを使用してコーディングすることもできますが、これは不便であり、shouldPopupおそらく将来さらに変更が加えられると、各要素を1つずつ変更しなければならない可能性があります。onclickshouldPopupTRUEonbeforeunload

同じ結果を得るより良い方法は何ですか？コードを単純化する方法についての入力は大歓迎です！:)

アップデート：

Iframeに関する詳細情報。私はいくつかの基本的な関数にjQueryライブラリを使用しています（特別なことは何もありません）。それらにはかなりのPHPといくつかのデータベース要求が含まれていますが、異常なことは何もありません。うまくいけば、この情報が何か提案をしようとしている人に役立つことを願っています

4

2 に答える 2

1

（本質的に）ダーティフラグを探しているようです（ここでのSOの使用のように）。基本的に、これは設計を補足するものであるため、スクリプトをUIから離し、ある種のセレクターを使用して、変更される可能性のあるすべての要素を取得し、それに応じてダーティフラグを監視および変更するイベントをバインドします。

簡潔にするために、jQueryのバージョンを次に示します。

var isDirty = false;
$(':input').on('change', function(e){
  isDirty = true;
});
$(window).on('beforeunload',function(e){
  if (isDirty){
    // Alert th euser there's unfinished changes
  }
});

非常にシンプルで、スクリプトを分離します。また、これらが子ウィンドウである場合は、を参照しwindow.parentてフラグをメインビューに渡すことができます（選択した場合）。

于 2013-01-21T22:02:07.647 に答える
1

コードをあまり変更したくない場合は、フラグを切り替えても問題ないと思います。以下は、単純で実用的なアプローチです。

フォームの例：

<input type="text" class="form" ...>
<input type="text" class="form" ...>
<select class="form" ...>
   <option value=""></option>
   ...
</select>

両方のiFrameの変更を監視します。

(function(){
  // This can be optimized to check against saved values on blur
  $("body").on("change", ".form", function(evt){
    window.top.$(window.top).trigger("change-form"); // trigger custom event in parent page
  });
}());

親ページ：

(function(){
  var dirty = false
  $(window).on("change-form", function(){
    dirty = true;
  });

  window.onbeforeunload = function(e) {
    // Notify user only if forms are dirty
    return dirty ? 'All unsaved data will be lost.' : undefined;
  };
}());

このコードはbraindumpであり、テストされていません。

注：ページが親ページとは異なるドメインから提供されている場合、クロスサイトスクリプティングの問題が発生します。その場合、親ページのJavascriptにアクセスすることはできません。次に、postMessage（）を使用して、親ページのドメインにメッセージを送信する必要があります。

Backbone.jsをご覧になることをお勧めします：

編集1：

バックボーンは、フォームの状態を管理するのに役立ちます。バックボーンでは、モデルがフォームデータを表します。ビュー（フォーム（フォームの入力）を表す）は、そのモデルにバインドされます。モデルのフォームフィールドとset（）属性を監視します。バックボーンモデルには独自の状態があり、たとえばchanged（）メソッドを使用してフォームが変更されたかどうかを確認できます。アプリケーションでモデルとビューを分離することは常に良い考えであり、責任を分離するのに役立ちます。

私はあなたに別の考えを与えたかっただけです。

編集2：

トップウィンドウでイベントをトリガーするコードを修正しました。うまくいくかどうかわかりませんでし$(window.top)た。それは動作しません。理由はわかりません。私はそれをテストしました、そしてこのコードは正しいです：

window.top.$(window.top). ...

上記のコードを更新しました。

于 2013-01-21T22:18:33.590 に答える