Question

我有一个基本表单的网页。在点击“提交”和页面重新加载结果之间有不可忽略的等待时间，因此我在用户等待时添加了一个微调器。

这很简单，这是HTML：

<div id="loadingBox" style="display:none;">
    <!---put the actual loader here--->
</div>

这是基本的事件处理程序，用于在用户单击提交后使微调框可见：

$("#submitButton").submit(function(e)
{
    $("#loadingBox").css('display', 'block');
});

问题在于用户可以单击“提交”，使该框出现，然后单击“转义”或单击浏览器按钮以取消页面加载，并且微调器将继续旋转。

我添加了这个选项，使微调器在遇到逃脱时消失：

$(document).keydown(function (e)
{
    if(e.keyCode == 27)
    {
        $("#loadingBox").css('display', 'none');
    }
})

如何检测用户单击了“取消页面加载”按钮？我找不到单击该按钮时将触发的事件，也找不到反映该事件的就绪状态或其他属性。我关心的是用户单击“取消加载”按钮，然后微调器没有消失，并且用户凝视着微调器，认为页面仍在做某事，但是什么也没做。

Answer 1

收听onbeforeunload事件。

window.addEventListener("beforeunload", function(event) {
  alert("How dare you leave this page?!");
});

Answer 2

这是我解决问题的方式。

首先，我将页面转换为使用AJAX。我正在使用Flask，因此此网页非常有帮助： https://medium.com/@doobeh/posting-a-wtform-via-ajax-with-flask-b977782edeee

但是随后我需要使用从AJAX接收到的数据来更新现有的Jinja2模板。我最终通过在render_template函数上调用jsonify来完成此操作，如下所述： Render Jinja after jQuery AJAX request to Flask

但是随后我的折叠/扩展模板表部分的按钮不起作用，因为事实证明，事件仅对加载页面时存在的内容起作用。因此，我不得不委派该事件以允许在事实之后添加的项触发我的jquery正在侦听的事件，如下所述： https://aiocollective.com/blog/click-doesn-t-work-after-ajax-load-jquery/

我希望这些链接对其他人有帮助！

如何检测用户已取消页面加载

2 个答案: