如何取消超鏈接點擊？

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