How can you cancel a hyperlink click?

Question

I am building an offline-capable HTML 5 web app for subway users. Often, mobile networks are so slow on the subway that page requests take a minute or more to get a response. I would like to offer users the option of switching to offline mode if loading a page takes more than 10 seconds.

I have tried to do this with a javascript setTimeout() just before setting window.location to a new page. If the page is still around when the timeout function is called, this means the page is taking too long, and I prompt the user with a confirm() dialog. If the user taps OK, I set window.location = '/offline', which is served out of appcache.

This works great most of the time, but sometimes the response from the original hyperlink comes back while the confirm dialog is on the screen. On both iOS and Android the presence of the confirm dialog seems to block the original hyperlink from replacing the page. On iOS, however, dismissing the confirm dialog always takes you to the original page, not the offline page.

I could probably replace the confirm dialog with a similar floating HTML dialog box on the page, but this would not give the user a change to respond at all if the page comes back while the dialog is up.

What I really want to do is cancel the hyperlink click. But this seems impossible.

Is there any other way to achieve the desired effect?

Answer 1

There is no requirement for the old page to respond in any way once navigation to another page has started, so the fact that it works at all is non-standard and kind of haxy.

You might be able to request the new page via AJAX, which is cancellable (either with .abort() or by simply ignoring the response). Then when it loads you can use innerHTML to dump the whole thing over the current page. Again, though, this is somewhat haxy and unreliable (stylesheets, scripts etc may not work).

All in all, attempting mess with network connectivity in this way is going to be as unreliable as the connection itself.

Answer 2

You can replace you confirm function with a jQuery dialog. In the jQuery dialog, you can have a link pr a button that directs the user to the offline page. If the user clicks on the link/button in time, the user will be directed to offline page.

Link for jQuery dialog sample: http://jqueryui.com/dialog/#modal-message

Answer 3

On WebKit browsers, you can use window.stop() to cancel everything that the browser is loading. This will cause the browser to terminate the request for the next page (as well as any other requests downloading images, javascript, ajax, etc.)

I solved the problem with the slow connection dialog disappearing if the page finally loads through design. Instead of a dialog, I made it a ribbon overlaid across the middle of the page, so it was less jarring to users if the ribbon and page disappeared if and when the page response finally came through. The wait option below simply makes the ribbon disappear. Here's the code that works on Webkit browsers:

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