85

「ページを離れてもよろしいですか?」を表示するにはどうすればよいですか? ユーザーが実際にページを閉じようとしたとき (ブラウザー ウィンドウまたはタブの [X] ボタンをクリックしたとき) ではなく、ページから離れようとしたとき (別のリンクをクリックしたとき) です。

クライアントは、ユーザーがページを閉じようとしたときに、「ページを離れてもよろしいですか? ショッピング カートに商品が残っています。」というメッセージを表示したいと考えています。

残念ながら$(window).bind('beforeunload')、ユーザーがページを閉じたときにのみ起動するわけではありません。

jQuery:

function checkCart() { 
  $.ajax({
    url : 'index.php?route=module/cart/check',
    type : 'POST',
    dataType : 'json',
    success : function (result) {
       if (result) {
        $(window).bind('beforeunload', function(){
          return 'leave?';
        });
       }
    }
  })
}
4

6 に答える 6

14

Ajax で JavaScript を試す

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

参考リンク

例 2:

document.getElementsByClassName('eStore_buy_now_button')[0].onclick = function(){
    window.btn_clicked = true;
};
window.onbeforeunload = function(){
    if(!window.btn_clicked){
        return 'You must click "Buy Now" to make payment and finish your order. If you leave now your order will be canceled.';
    }
};

ここでは、ボタンをクリックするまで、ページを離れるたびにユーザーに警告します。

デモ: http://jsfiddle.net/DerekL/GSWbB/show/

于 2013-09-16T05:25:09.013 に答える
12

ここにクレジットを入れる必要があります: window.onbeforeunload がトリガーされたときにリンクがクリックされたかどうかを検出する方法は?

基本的に、ソリューションはリスナーを追加して、リンクまたはウィンドウが原因で unload イベントが発生したかどうかを検出します。

var link_was_clicked = false;
document.addEventListener("click", function(e) {
   if (e.target.nodeName.toLowerCase() === 'a') {
      link_was_clicked = true;
   }
}, true);

window.onbeforeunload = function(e) {
    if(link_was_clicked) {
        return;
    }
    return confirm('Are you sure?');
}
于 2013-09-22T21:56:39.327 に答える
2

As indicated here https://stackoverflow.com/a/1632004/330867, you can implement it by "filtering" what is originating the exit of this page.

As mentionned in the comments, here's a new version of the code in the other question, which also include the ajax request you make in your question :

var canExit = true;

// For every function that will call an ajax query, you need to set the var "canExit" to false, then set it to false once the ajax is finished.

function checkCart() {
  canExit = false;
  $.ajax({
    url : 'index.php?route=module/cart/check',
    type : 'POST',
    dataType : 'json',
    success : function (result) {
       if (result) {
        canExit = true;
       }
    }
  })
}

$(document).on('click', 'a', function() {canExit = true;}); // can exit if it's a link
$(window).on('beforeunload', function() {
    if (canExit) return null; // null will allow exit without a question
    // Else, just return the message you want to display
    return "Do you really want to close?";
});

Important: You shouldn't have a global variable defined (here canExit), this is here for simpler version.

Note that you can't override completely the confirm message (at least in chrome). The message you return will only be prepended to the one given by Chrome. Here's the reason : How can I override the OnBeforeUnload dialog and replace it with my own?

于 2013-09-13T10:05:38.987 に答える
-3

onbeforeunload' ' イベントを試すことができます。

こちらもご覧ください～

ダイアログ ボックスが 1 秒間実行されて消えますか?

于 2013-09-20T19:35:56.463 に答える