2017-03-28 4 views
0

私のWebアプリケーションはページの更新をリッスンしています。ユーザーがダイアログボックスのボタンを選択する前にページを更新しないようにするにはどうすればよいですか?

私は、次の手順を実行して、これをしようとしています:

window.onbeforeunload = dialogBox; 

アイデアは、ユーザーが2つのボタンのいずれかを選択から選択をしたまではさわやかからページを防ぐために、ダイアログボックスを表示することですリフレッシュを続行するかリフレッシュをキャンセルするかを決定します。

残念ながら、このページではダイアログボックスが短時間表示されてから、更新が続けられます。とにかく、私は 'onbeforeunload'を使って、ページがリフレッシュを続行してダイアログボックスを表示しないようにすることができますか?

'onbeforeunload'を使用することは不可能ですか?

私のダイアログボックスのコード:

function dialogBox() 
{ 
    $("#dialog").html(""); 
    $("#dialog").append("There appears to be some unsaved changes"); 
    $(function() { 
     $("#dialog").dialog({ 
      modal: true, 
      buttons: { 
       Cancel: function() { 
        $(this).dialog("close"); 

       }, 

       "Save": function() { 

       }, 
      }, 
     }) 
    }); 
} 

はお時間ありがとうございました。

編集:私はユーザーがリフレッシュするのを防止したくありません。 onbeforeunloadを使用するときに表示される一般的なポップアップボックスを表示するのではなく、それを生成する関数を呼び出してカスタムダイアログボックスを表示します。誰かが選択をするまでは、それを少しずつ表示することができます。その選択は、「キャンセル」を選択することによって、リフレッシュまたは半分で続行する必要があります。

Google Chromeを使用している場合は、私が選択したウェブブラウザとして使用しています。

+1

おそらく関連する:([jQueryの/ Javascriptを使用して、ページの更新の任意の形態を防ぎます] http://stackoverflow.com/questions/3527041/prevent-any-form-of-page-リフレッシュ - 使用 - jquery - javascript)。 ページをリロードする前にカスタムダイアログボックスを実装することはできないようです。 –

+0

ご回答ありがとうございます。私は私の質問を繰り返すので、私はより明確になります。 – user1156596

+0

https://gist.github.com/unamatasanatarai/c3d91350309fcf167975a118283d1032 –

答えて

0

history.go(-1)を使用してください。ページがと相互作用されていない限り、ブラウザがbeforeunloadイベントハンドラで作成されたプロンプトが表示されない場合があり、不要なポップアップに対抗するために:あなたの関数を呼び出す前に

+0

haha​​、どちらもうまくいきませんでした。私のページは今や驚くべきものです。 – user1156596

+0

ウィンドウのアンロード後にJavascriptの実行が停止されるため、呼び出されません。 –

0

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

ページは

注意と述べています。特定のブラウザーのリストについては、ブラウザーの互換性のセクションを参照してください。

2011年5月25日以降、HTML5仕様では、このイベント中にwindow.alert()、window.confirm()、およびwindow.prompt()メソッドの呼び出しが無視されることがあります。詳細は、HTML5 specificationを参照してください。

のFirefox v4.0とクロームv51.0からブラウザは、そうであっても、カスタム設計されたプロンプトを考えることは、このWindow.unbeforeunloadイベントのための機能のほんの達成不可能一種である、デフォルトのプロンプトにカスタムメッセージをサポートしていません。

直接引用: -

ノート

このイベントリターン(またはのreturnValueプロパティを設定する)ヌル又は未定義以外の値は、ユーザがページのアンロードを確認するメッセージが表示された場合。一部のブラウザでは、このダイアログにイベントの戻り値が表示されます。 Firefox 4、Chrome 51、Opera 38、Safari 9.1からは、返された文字列の代わりにWebページの管理下にない一般的な文字列が表示されます。たとえば、Firefoxでは、「このページは退出することを確認するように要求しています。入力したデータが保存されない可能性があります」という文字列が表示されます。

構文

window.onbeforeunload = funcRef 

funcRef関数または関数式への参照です。 この関数は、EventオブジェクトのreturnValueプロパティに文字列値を割り当て、同じ文字列を返す必要があります。

window.onbeforeunload = function(e) { 
    var dialogText = 'Dialog text here'; 
    e.returnValue = dialogText; 
    return dialogText; 
}; 
関連する問題