jQuery Mobile is NOT triggering webViewDidStartLoad and webViewDidFinishLoad after leaving homepage in webView

Question

I have a simple iOS app with a single view that contains a UIWebView. Within my webView, I display my jQuery Mobile website.

Since jQuery Mobile loads pages via ajax, the webViewDidStartLoad and webViewDidFinishLoad methods are NOT called once the initial page loads. I've found similar questions on SO such as this one, but I'm not sure where to use the window.location = "localFunction" call, and no one has yet to confirm this actually works.

Here's my issue (example):

1. App Starts
2. shouldStartLoadWithRequest is called
3. webViewDidStartLoad is called, and network activity indicator is shown.
4. webViewDidFinishLoad is called, network activity indicator is hidden, and webView displays the initial web page.
5. User clicks a link from the homepage
6. shouldStartLoadWithRequest is called
7. The second page is displayed, but webViewDidStartLoad and webViewDidFinishLoad are not called again for the duration of the session.

Is there a way to force jQuery Mobile or the iOS app to call webViewDidStartLoad and webViewDidFinishLoad so that I can do a simple task, such as show a network activity indicator when webViewDidStartLoad is called, and hide it when webViewDidFinishLoad is called?

Answer 1

If you want to signal the UIWebView of page changes; you can use the custom-scheme launching option as discussed in the SO post in your question.

Define a window.location change in the pagebeforechange handler: (JQM Page change events)

logToIosConsole: function(msg){ 
    console.log("logToIosConsole: log://"+msg); 
    var standalone = window.navigator.standalone, 
    userAgent = window.navigator.userAgent.toLowerCase(), 
    safari = /safari/.test( userAgent ), 
    ios = /iphone|ipod|ipad/.test( userAgent ); 

    if( ios ) { 
        if ( !standalone && !safari ) { 
            //uiwebview 
            window.location = "log://"+msg; 
        }; 
    } else { 
        //not iOS 
    }; 

Use it in javascript

$(document).on("pagebeforechange", function(eve, ui){
    logToIosConsole("pagebeforechange called on "+eve.currentTarget.URL);
});

Intercept this custom-url-scheme in your shouldStartLoadWithRequest

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSString *theAnchor=[[[request URL] absoluteString] stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding] ;
    if([theAnchor hasPrefix:@"log:\/\/"]) {
        NSString *logText=[theAnchor substringFromIndex:@"log:\/\/".length];
        NSLog(@"LogMsg==>%@",logText);
        return NO; 
    }
}

Answer 2

webViewDidStartLoad and webViewDidFinishLoad are only invoked when window.location changes. UIWebView cannot intercept Ajax calls.

You can either turn-off JQM's Ajax navigation - globally by setting ajaxEnabled="false" or individual pages/links using data-ajax="false".

OR

If the problem is simply showing an activity indicator; you could use JQM's in-built activity indicator by invoking $.mobile.showPageLoadingMsg.

Answer 3

It is a problem with the way the jQuery Mobile site renders pages. They DO get called if you disable ajax navigation for the site. With Ajax ENABLED, the webViewDidStartLoad never gets called when clicking a link because since the page is requested through Ajax, the window location doesn't change, and therefore iOS doesn't register a page change or page load.