Javascript - 如何检测用户点击导航弹出窗口的选项

Question

当用户关闭浏览器标签时，我想根据他点击的选项发出ajax请求。

如果他点击“离开此页面” - ＆gt; Ajax Call 1

如果他点击停留在此页面上 - ＆gt; Ajax Call 2

这是我的代码现在的样子

我希望在用户选择任何一个选项之后执行此ajax调用。但是，如果用户试图关闭标签

，目前ajax调用会自动运行

window.onbeforeunload = userConfirmation;

function userConfirmation(){
  var cookieName  = $.trim("<?php echo $this->uri->segment('5') ?>");
  var toValue     = $.trim($('#toValue').val());
  document.cookie = cookieName+'=; expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/';
  var confirmation = 'The message will be discarded.';
  $.ajax({
    type: 'POST',
    url: "<?php echo BASE_URL.'index.php/admin/mail_actions/deleteSessionDatas' ?>",
    data: {'toValue':toValue},
    dataType: 'html',
    success: function(response){
      console.log(response);
      var response = $.trim(response);
    }
  });
  return confirmation;
}

Answer 1

好吧，我提出这是一个黑客而不是 解决方案，这只是一个解决方案。

为了执行一段代码_{（仅适用于AJAX）}，仅当用户点击 停留在此页面 你必须让它以异步方式运行，因此javaScript不断运行同步代码（return语句）。

jQuery.ajax()来电必须包含async: true参数，然后用户点击后要执行的代码必须包含在setTimeout()函数中使用正确的超时_{（如果页面花费太多时间卸载超时必须更高）}

var stayHere = ""; // this variable helps with the "stay on this page"_code cancellation when user chooses "leave this page"
window.onbeforeunload = userConfirmation;

function userConfirmation() {
    var confirmation = "Your edits will be lost";
    stayHere = setTimeout(function() { // the timeout will be cleared on "leave this page" click
        $.ajax({
            url: "ajax-call.php",
            type: "post",
            data: {chosenOpt: "stay"},
            async: true, // important
            success: function(data) { console.log(data);},
            error: function() { alert("error");}
        });
    }, 2000); // Here you must put the proper time for your application
    return confirmation;
}

如果用户点击如何运行代码>离开此页

如果用户选择离开页面，则页面开始卸载，当它完全卸载unload事件时，我将把代码放入其监听器中：

jQuery(window).on("unload", function() {
clearTimeout(stayHere); // This is another assurance that the "stay here"_code is not executed
$.ajax({
    url: "ajax-call.php",
    type: "post",
    data: { chosenOpt: "leave"},
    async: false, // If set to "true" the code will not be executed
    success: function(data) { console.log(data);},
    error: function() { console.log("Error");} // In chrome, on unload, an alert will be blocked
});

}）;

注意：请注意在unload处理程序中执行的代码。由于unload事件在卸载所有内容后触发 ，因此页面中没有任何对象仍可用。

这是一个jsfiddle，看看它是如何运作的。

ajax-call.php仅包含

echo $_POST["chosenOpt"] . "_" . rand(1, 9999);

输出<{1}} 将此页和leave_[number]保留在上留在此页

注意：您可以看到stay_[number]仅刷新页面，并且在控制台中选中了保留日志。