Question

我正在使用Web CMS。当用户点击链接移动到其他页面或提交表单时，我想在右上角显示“请稍候”动画GIF，以表示加载正在进行中。

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

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

编辑：要解决“您不应该这样做，浏览器已经拥有它”的评论。我有两个具体的理由来介绍自定义解决方案。



我在页面上有AJAX按钮。我需要一个活动指示器，以便用户不会混淆是否注册了点击。



在缓慢连接上有很多延迟，一些浏览器的进度条移动速度非常慢。我在处于真实工作状态的时候需要很长时间，直到悸动者在IE6 / 7中显示任何类型的活动。这给人的印象是没有任何事情发生，应用程序反应非常缓慢，这让我很烦。我想要一个不断移动的指示器（例如Safari）。

Answer 1

抱歉，我认为没有办法做到这一点，不。我的意思是你可以找到一个转义按键来获取它的价值，但是没有通用的方法来检测下一页加载的取消。除了猜测如果你在提交/点击后仍然在几秒钟之后，它就会被取消或你的服务器很慢。或者在同一页面中使用AJAX完成整个导航和提交内容，这样可以通过破坏浏览器自己的停止按钮来避免问题;可能不是一个好主意。

（不管怎么说，添加你自己的等待悸动真的不是一个好主意;浏览器有一个非常好的一个！）

Answer 2

这不适用于提交按钮。用户单击“提交”后，请求已发布到服务器。一旦发生这种情况，就会执行该操作。在这种情况下，您可以做的最好的事情是阻止用户查看其操作的响应，但仍然会执行操作。

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

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

如果您仍然想要了解这一点，了解其含义，您可以轻松地执行此操作with a JavaScript framework，例如jQuery，YUI，Dojo，{{3 }，MooTools或ExtJS。

以下是如何在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); 
});

要在加载框中添加动画gif，请将文本“正在加载...”替换为指向您选择的加载GIF的<img />标记。这里有一个现场演示：Closure

你需要这个CSS来使用上面的代码：

#loadingOverlay {
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    width: 100%; 
    z-index: 1000; 
    background: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;    
    opacity: 0.5;
}
#loadingAnimation {
    position: absolute; 
    top: 30%; 
    left: 50%;
    z-index: 1001;
}

Answer 3

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

http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/

基本上，您将用户引用相同的URL但最后使用锚点（http://localhost/home#somepage?param1=val1）并使用AJAX加载数据。 Javascript将捕获锚更改并可以显示“加载”图标并提供其他内容，如“取消加载”。在这种情况下，您将拥有自己的浏览器历史记录，因此您可以在浏览器中“返回”或在javascript中说history.go（-1）。

Answer 4

（是的，我喜欢旧话题）

我在这里遇到同样的情况。我正在构建一些通过表单提交完成导航的页面，我发现在用户退出之前会清楚地向用户显示正在发生的事情并触发15次相同的请求 - “我们不信任用户，做吗？“

所以我使用jQuery以及一个很好的插件maned Impromptu，可用http://trentrichardson.com/Impromptu/index.php

这是一段代码：

$(document).ready( function () {

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

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

});

Answer 5

我不相信可以检查用户是否以跨浏览器的方式点击STOP按钮，但是找到问题的根源，您可以自己监控请求：

运行xhr请求时，使用onreadystatechange注册一个函数。检查是否xhr.readyState === XMLHttpRequest.DONE。检查您的指标是否成功请求（手动波浪，编辑欢迎）。如果它没有成功，那么它会以某种方式被中断，你应该恢复你的进度指示器。

如果这是一种常见情况，您可以通过猴子修补自动执行此操作。请参阅this question。

如果是POST，您可能还应警告用户取消其请求不会阻止数据更改。你可以在这里变得更复杂，并自动反转POST请求或告诉他们究竟是什么改变，以便他们可以决定。

希望有所帮助！

Answer 6

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

检测用户何时单击链接，但中止

6 个答案: