如何取消超链接点击？

Question

我正在为地铁用户构建具有离线功能的HTML 5 Web应用程序。 通常，地铁上的移动网络非常慢，以至于寻呼请求需要一分钟或更长时间才能获得响应。 如果页面加载时间超过10秒，我想为用户提供切换到离线模式的选项。

我试图在将window.location设置为新页面之前使用javascript setTimeout（）进行此操作。 如果在调用超时功能时页面仍在周围，则意味着该页面花费的时间太长，并且我会向用户显示一个Confirm（）对话框。 如果用户点击“确定”，我将设置window.location ='/ offline'，这将从应用程序缓存中提供。

这在大多数情况下都有效，但是有时在确认对话框出现在屏幕上时，原始超链接的响应会返回。 在iOS和Android上，确认对话框的出现似乎都阻止了原始超链接替换页面。 但是，在iOS上，取消确认对话框始终会将您带到原始页面，而不是离线页面。

我可以用页面上的类似浮动HTML对话框替换“确认”对话框，但是如果对话框打开时页面又返回，则根本不会给用户任何更改以做出响应。

我真正想做的是取消超链接单击。 但这似乎是不可能的。

还有其他方法可以达到预期的效果吗？

Answer 1

一旦导航到另一个页面，就不需要旧页面以任何方式做出响应，因此，完全可以正常工作的事实是非标准的，并且有些混乱。

您可能可以通过可取消的AJAX请求新页面（通过.abort()或通过简单地忽略响应）。 然后，在加载时，您可以使用innerHTML将整个内容转储到当前页面上。 同样，这有点模糊且不可靠（样式表，脚本等可能不起作用）。

总而言之，以这种方式尝试破坏网络连接将与连接本身一样不可靠。

Answer 2

您可以使用jQuery对话框来替换确认功能。 在jQuery对话框中，您可以有一个链接pr a按钮，该按钮将用户定向到脱机页面。 如果用户及时单击链接/按钮，则该用户将被定向到脱机页面。

jQuery对话框示例的链接： http : //jqueryui.com/dialog/#modal-message

Answer 3

在WebKit浏览器上，可以使用window.stop（）取消浏览器正在加载的所有内容。 这将导致浏览器终止对下一页的请求（以及下载图像，javascript，ajax等的任何其他请求）。

如果页面最终通过设计加载，我解决了慢速连接对话框消失的问题。 我用对话框代替功能区，而不是使用对话框，而是在页面中间覆盖了一条功能区，这样，如果在页面响应最终通过时功能区和页面消失了，对用户的影响就较小。 下面的等待选项只是使功能区消失。 以下是可在Webkit浏览器上使用的代码：

    // This code executes in the click event for a link to forUrl
    clearTimeout(MyApp.slowPageTimeout);
    MyApp.slowPageTimeout = setTimeout('MyApp.slowPageLoadEvent("'+forUrl+'");', 10000);

    slowPageLoadEvent: function(forUrl) {           
        var cachedDocument = myApp.getDocumentByUrl(forUrl);            
        var height = 100;
        var position = window.innerHeight/2+window.scrollY-height/2;
        var slowHttp = "<div id='slow-http-warning'>Slow connection.  <span id='no-wait'>Read offline</span>, or <span id='wait'>wait</span>?</div>";

        if ($("#slow-http-warning").length == 0) {
            $('body').append(slowHttp);                         
        }
        else {
            $('#slow-http-warning').html(slowHttp);                     
        }
        $("#slow-http-warning").css('top', ""+position+"px");
        $("#wait").click(function() {
            $('#slow-http-warning').remove();
        });
        $("#no-wait").click(function() {
            window.stop(); // not supported in IE, but it has an equivalent: document.execCommand("Stop");
            $('#slow-http-warning').remove();
            MyApp.setOffline();  // switch to operating in offline mode
            MyApp.go(cachedDocument); // display page from local storage cache
            return;           
        });
    }