2014-01-07 25 views
5

私は現在のページから離れようとしている場合にユーザーにアラートを表示する方法を知っていますが、表示する方法があるかどうか疑問に思っていましたこのアラートは、ウィンドウ/タブが閉じられているときのみですか? ユーザーがリンクをクリックしたときではなく、ウィンドウまたはタブが閉じられているときにのみ確認画面を表示したいと思います。ブラウザ/タブのクローズを検出する

答えて

3

できません。

閉じる唯一のものはonbeforeunloadイベントですが、閉じたウィンドウ/タブまたは別のページへのナビゲーションの間には(javascriptに対して)違いはありません。

フォローアップ:

私は、ページ上のすべてのアンカーにクリックハンドラをアタッチし、「ダーティ」フラグを使用することができと仮定、それは本当にハックっぽいです。 (私を許してください、簡単にするためにjqueryを使用してください):

(function(){ 
    var closingWindow = true; 
    $('a').on('click', function(){ 
    if (this.href == /* on-domain link */){ 
     closingWindow = false; 
    } 
    }); 
    $(window).on('beforeunload',function(){ 
    if (closingWindow){ 
     // your alert 
    } 
    }); 
})(); 

しかし、それはあなたとほぼ同じです。 注:他のjavascript関数でwindow.locationなどを使用すると、これは役に立ちません。

+0

これは私が恐れていたものです...どうもありがとうございます! – John

1

この2つを区別することはできません。

window.onbeforeunloadブラウザがリソースをアンロードする直前にトリガーされます。あなたはそれが発生する程度だことだけが、アンロードの理由を知らない:MDNから

を:

ウィンドウがそのリソースunloadしようとしている火災イベントを。 文書は引き続き表示され、event is still cancelableです。

+0

私はそれを恐れていた...とにかく助けてくれてありがとう! – John

0

このようなことはどうですか。

  1. がfalseに設定されたグローバル変数を持っている(すなわちvar hasCLickedLink = false;

  2. すべてのリンクで
  3. <a>)、onbeforeunloadtrue

  4. に変数を設定し、イベントハンドラを添付し、変数の値をチェックして、リンクがクリックされているかどうかを確認します。まだfalseの場合は、リンクをクリックしていないため、アラートを送信していません。

+1

良い解決策ですが、前後のボタンのクリックをキャッチしません。 – BenM

0

eventsは、確認ダイアログボックスを表示しないように明示的に指定する必要があります。

var validNavigation = 0; 

function bindDOMEvents() { 
    // Attach the event keypress to exclude the F5 refresh 
    $(document).keydown(function(e) 
    { 
     var key = e.which || e.keyCode; 
     if (key == 116) 
     { 
      validNavigation = 1; 
     }; 
    }); 
    // Attach the event click for all links in the page 
    $("a").bind("click", function() 
    { 
     validNavigation = 1; 
    }); 
    // Attach the event submit for all forms in the page 
    $("form").bind("submit", function() 
    { 
     validNavigation = 1; 
    }); 
    // Attach the event click for all inputs in the page 
    $("input[type=submit]").bind("click", function() 
    { 
     validNavigation = 1; 
    }); 
}; 
$(document).ready(function() 
{ 
    bindDOMEvents(); 
    window.onbeforeunload = function() { 
     console.log(validNavigation); 
     if (validNavigation == '1') 
     { 
      console.log("No Alert.. Continue"); 
     } 
     else 
     { 
      return false; 
     } 
    }; 
}); 
関連する問題