Question

我正在为地铁用户构建一个支持离线功能的HTML 5网络应用。通常，移动网络在地铁上的速度非常慢，因此页面请求需要一分钟或更长时间才能得到响应。如果加载页面的时间超过10秒，我想为用户提供切换到离线模式的选项。

在将window.location设置为新页面之前，我尝试使用javascript setTimeout（）执行此操作。如果在调用超时功能时页面仍然存在，这意味着页面花费的时间太长，我用一个confirm（）对话框提示用户。如果用户点击OK，我设置window.location ='/ offline'，这是由appcache提供的。

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

我可能会在页面上用类似的浮动HTML对话框替换确认对话框，但如果在对话框启动时页面返回，则根本不会给用户做出响应的更改。

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

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

Answer 1

一旦开始导航到另一个页面，就不需要旧页面以任何方式作出响应，因此它的工作原理是非标准的，并且有点haxy。

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

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

Answer 2

您可以使用jQuery对话框替换确认功能。在jQuery对话框中，您可以使用一个链接来指导用户进入离线页面。如果用户及时点击链接/按钮，则会将用户定向到离线页面。

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;           
        });
    }

如何取消超链接点击？

3 个答案: