0

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

在将 window.location 设置为新页面之前，我曾尝试使用 javascript setTimeout() 来执行此操作。如果在调用超时函数时页面仍然存在，这意味着页面花费的时间太长，我会通过确认（）对话框提示用户。如果用户点击 OK，我设置 window.location = '/offline'，它是由 appcache 提供的。

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

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

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

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

4

3 回答 3

1

一旦开始导航到另一个页面，旧页面就不需要以任何方式响应，因此它完全可以工作的事实是非标准的并且有点诡异。

您也许可以通过 AJAX 请求新页面，该页面是可取消的（通过.abort()或简单地忽略响应）。然后，当它加载时，您可以使用innerHTML将整个内容转储到当前页面上。再一次，虽然，这有点狡猾和不可靠（样式表、脚本等可能不起作用）。

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

于 2012-12-28T16:57:17.880 回答
0

您可以用 jQuery 对话框替换您的确认功能。在 jQuery 对话框中，您可以有一个链接 pr 一个将用户引导到离线页面的按钮。如果用户及时点击链接/按钮，用户将被引导到离线页面。

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

于 2012-12-28T17:01:48.010 回答
0

在 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;           
        });
    }
于 2013-02-02T16:47:46.623 回答