Pause JavaScript execution in UIWebView

Question

I placed multiple UIWebViews side by side into a UIScrollView. Every UIWebView includes a "web browser" view that displays a local HTML file. Unfortunately I have no idea how to load the webviews in the background and at the same time to prevent or stop the JavaScript functions from executing that are included into the HTML files. I mean by "in the background" as I watch the first few panels and in the meantime the remainder panels just lazy load silently. I saw different applications (like pugpig) do this - it lazy loads the HTML pages and stops the JavaScript animations - it can somehow stop the JavaScript to animate the whole fade effect that I use frequently in my HTML pages between tab switches and at the moment I load the panel it continues the fade animation.

So, the question is:

How can I pause a JavaScript animation and prevent memory issues using Objective-C code and how can I continue the fade animation once I display the panel?

Answer 1

Have you tried injecting JavaScript (i.e. - (NSString*) stringByEvaluatingJavaScriptFromString: (NSString *)script) that observes onblur and onfocus of the window, or pageshow and pagehide? This post proposes a couple of solutions for that.

So, you could try something like

$(window).blur(function(){
  // when the web view loses focus
});
$(window).focus(function(){
  // when the web view gains focus
});

If that fails, you could try pagehide and pageshow events:

function pageShown(evt)
{
    if (evt.persisted)
        // The page was just restored from the Page Cache
    else
        // The initial load. This is the same as the page load event
}

function pageHidden(evt)
{
    if (evt.persisted)
        // The page was suspended and placed into the Page Cache
    else
        // This is the same as the page unload event
}

window.addEventListener("pageshow", pageShown, false);
window.addEventListener("pagehide", pageHidden, false);

Answer 2

I guess you can control the animation javascripts that runs in the HTML (you said the page is local). What would I do is to wrap the animation in a JS function that would get called from Cocoa (there's tons of references for that on StackOverFlow e.g. - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script).

Then I would create a stack that has a record for each one of the HTML pages you want to lazy load. On every UIScrollView scrollViewDidScroll: I would check if a scroll in the size of a whole webview size has performed if so I would pop that record from the stack and call the Javascript startAnimation function we mentioned before on the next webview.

If you need double-sided communication (from javascript to cocoa) for example to indicate that the animation was completed you can use JSBridge. (How do I call an Objective-C method from JavaScript on UIWebView?)