Javascript 当用户单击链接但中止时检测

我在一个网络CMS上工作。当用户单击链接移动到其他页面或提交表单时，我希望在右上角显示一个“请稍候”动画GIF，以表示正在加载

但是，用户可以取消在其浏览器中加载新页面，例如按“取消”按钮或ESC。在这种情况下，当浏览器停止加载下一页时，它们将停留在当前页上

如何在Javascript中检测到这一点，并再次隐藏“wait”图标

编辑：解决“你不应该这样做，浏览器已经有了”的评论。引入定制解决方案有两个具体原因

• 我在页面上有AJAX按钮。我需要一个他们的活动指标，这样用户就不会混淆点击是否注册

• 在连接速度慢且滞后的情况下，一些浏览器的进度条会移动得非常慢。我处在一个真实的工作环境中，需要很长时间才能让悸动者在IE6/7中表现出任何活动。这给人的印象是什么都没有发生，应用程序反应非常慢，这让我很恼火。我想要一个不断移动的指示器（比如Safari）

---

这对提交按钮不起作用。用户单击“提交”后，请求已发布到服务器。一旦发生这种情况，操作即已执行。在这种情况下，您所能做的最好的事情就是阻止用户看到他们操作的响应，但是操作仍然会被执行

此外，一旦启动了另一个请求，阻止用户导航到另一个页面的唯一方法是将用户重定向回他们来自的页面。一般来说，取消请求只是一个糟糕的主意™

对于表单，另一种选择是对所有表单提交使用AJAX。AJAX请求可以被取消，因此您可以利用这一点，尽管这会使事情变得更加复杂和难以处理

如果你仍然想完成这项工作，尽管你知道其中的含义，你可以很容易地做到，，，或

下面是一个如何在jQuery中执行此操作的示例。正如我所提到的，如果不刷新用户所在的页面（停止当前页面加载），则无法在请求启动后停止请求，因此我在本例中省略了该部分

$().ready(function() { 
    function showLoading(){  
        $loadingOverlay = $('<div id="loadingOverlay"></div>'); 
        $loadingAnimation = $('<div id="loadingAnimation">Loading...</div>'); 
        $("body").prepend($loadingAnimation).prepend($loadingOverlay); 
    } 

    $("a[href]").click(showLoading); 
    $("form").submit(showLoading); 
});

---

我想你应该检查一下所谓的“锚导航”。这里有一个很好的教程：

---

基本上，您会将用户引用到相同的URL，但最后使用anchor（）并使用AJAX加载数据。Javascript将捕捉到锚的变化，可以显示“加载”图标，并提供诸如“取消加载”之类的附加内容。在这种情况下，您将有您的浏览器历史记录，因此您可以在浏览器或历史记录中说“后退”。在javascript中说（-1）。

对不起，我认为没有任何方法可以做到这一点，不。我的意思是，您可以找到一个escape键，但没有常规方法检测下一页加载的取消。除了猜测，如果在提交/单击后的几秒钟内，您仍然处于状态，那么可能是提交/单击被取消，或者是服务器运行缓慢。或者在同一个页面中使用AJAX完成整个导航和提交工作，只需打破浏览器自己的停止按钮即可避免问题；可能不是个好主意

（我不认为添加自己的等待按钮真的是个好主意；浏览器有一个非常好的按钮！）

（是的，我确实喜欢老的主题）

我在这里也面临同样的情况。我正在构建一些页面，其中导航是通过表单提交完成的，我发现可以方便地向用户清楚地显示，在用户退出并触发15次相同请求之前，发生了一些事情——“我们不信任用户，是吗？”

所以我使用jQuery和一个很好的插件maned Impromptu，可以在那里找到

下面是一段代码：

$(document).ready( function () {

 $("form").submit( function() {
  $.prompt( "<center>Sending request...</center>", {
   overlayspeed: 200,
   buttons:{}
  });

  setTimeout( "jQuery.prompt.close()", 2000 );
 });

});

$（文档）.ready（函数（）{
$（“表格”）。提交（函数（）{
$.prompt（“发送请求…”{
超高速：200，
按钮：{}
});
setTimeout（“jQuery.prompt.close（）”，2000）；
});
});

我认为无法检查用户是否以跨浏览器方式点击了停止按钮，但要解决问题的根源，您可以监控请求本身：

运行xhr请求时，请使用

onreadystatechange

注册函数。检查是否

xhr.readyState===XMLHttpRequest.DONE

。检查您的指示器，以确定请求是否成功（挥手，欢迎编辑）。如果它没有成功，那么它会以某种方式被中断，您应该恢复您的进度指示器

如果这是一个常见的场景，您可以通过猴子补丁来自动完成。看

如果是帖子，您可能还应该警告用户，取消他们的请求不会阻止数据更改。你可以在这里变得更复杂，自动撤销POST请求，或者告诉他们更改了什么，以便他们可以做出决定

---

希望有帮助

窗口。这似乎是一个很有希望的解决方案，但目前（2020-05-02），它被标记为仅由Chrome和Edge支持的实验技术。此外，它似乎是为处理加载现有页面或资源而不是下一页的中止而设计的。

我总是觉得那些“等待”和“加载”的事情很烦人。默认情况下，浏览器有它（FireFox/Safari中有一个微调器，IE中有一个进度条）。最好考虑不要添加它。在缓慢的系统和连接上，尤其是IE在传达当前正在做的事情上非常模糊。在某个地方弹出一个快速符号可以纠正这种情况。关于AJAX点，如果使用jQuery，有一些全局事件处理程序可以很好地完成这项工作。看到我一直在用jsfiddle.net/e4z9bv6k玩的小提琴了吗，还有一些有用的v，所以发布stackoverflow.com/q/3735877和stackoverflow

$(document).ready( function () {

 $("form").submit( function() {
  $.prompt( "<center>Sending request...</center>", {
   overlayspeed: 200,
   buttons:{}
  });

  setTimeout( "jQuery.prompt.close()", 2000 );
 });

});