Cordova InAppBrowser opens but the page is loaded in the main one

Question

We have Sencha Touch app. It displays various content including pages with links outside the application (to different web servers). What we did was that we added a inappbrowser plugin to handle the links.

this.getItemsDetail().element.on('tap', function(event, target) {
        event.preventDefault();
        window.open(target.href, '_blank');
        console.log('tap');
    }, this, {delegate : 'a'});

This works - the "tap" is logged. The child browser is opened. Problem is that SOMETIMES the event "falls through", misses the inappbrowser and loads in the main webview. I managed to toggle debug in the inappbrowser class. Log is at the bottom.

Problem is that this issue is not consistent. Sometimes it's hard to reproduce. You have to try clicking and then it happens. I assume the core is

2013-11-18 14:11:18.362 CDVWebViewDelegate: Navigation started when state=1
2013-11-18 14:11:18.363 Failed to load webpage with error: CDVWebViewDelegate: Navigation started when state=1

I do not know what exactly does the message mean. From the code it looks like "state 1" is "STATE_WAITING_FOR_LOAD_START"

typedef enum {
    STATE_IDLE,
    STATE_WAITING_FOR_LOAD_START,
    STATE_WAITING_FOR_LOAD_FINISH,
    STATE_IOS5_POLLING_FOR_LOAD_START,
    STATE_IOS5_POLLING_FOR_LOAD_FINISH,
    STATE_CANCELLED
} State;

But still - I am not sure what I'm doing wrong and how to load webpage in "correct" state.

16.285 tap
16.300 webView shouldLoad=1 (before) state=0 loadCount=-1 URL=http://spokendata.com/
16.300 webView shouldLoad=1 (after) isTopLevelNavigation=1 state=1 loadCount=0
16.301 webView didStartLoad (before). state=1 loadCount=0
16.301 webView didStartLoad (after). state=2 loadCount=1 fireCallback=1
16.465 webView didFinishLoad (before). state=2 loadCount=1
16.466 webView didFinishLoad (after). state=0 loadCount=0 fireCallback=1
18.362 webView shouldLoad=1 (before) state=1 loadCount=0 URL=http://spokendata.com/
18.362 CDVWebViewDelegate: Navigation started when state=1
18.363 Failed to load webpage with error: CDVWebViewDelegate: Navigation started when state=1
18.364 webView shouldLoad=1 (after) isTopLevelNavigation=1 state=1 loadCount=0
18.438 webView didStartLoad (before). state=1 loadCount=0
18.439 webView didStartLoad (after). state=2 loadCount=1 fireCallback=1
18.439 Resetting plugins due to page load.
18.553 webView didFinishLoad (before). state=2 loadCount=1
18.553 webView didFinishLoad (after). state=0 loadCount=0 fireCallback=1
18.553 Finished load of: http://spokendata.com/
18.995 webView shouldLoad=1 (before) state=0 loadCount=0 URL=http://spokendata.com/demo
18.996 webView shouldLoad=1 (after) isTopLevelNavigation=1 state=1 loadCount=0
18.997 webView didStartLoad (before). state=1 loadCount=0
18.997 webView didStartLoad (after). state=2 loadCount=1 fireCallback=1
18.997 Resetting plugins due to page load.
19.152 webView didFinishLoad (before). state=2 loadCount=1
19.152 webView didFinishLoad (after). state=0 loadCount=0 fireCallback=1
19.153 Finished load of: http://spokendata.com/demo

We're using Cordova 3.1.0-0.1.0

Update: It happens occasionally - sometimes it works, sometimes it does not. It happens for various pages (big and small). I created an app (https://github.com/tomasfejfar/cordova-bug-01) where I am able to replicate the problem. You just try clicking on the "SEZNAM" link long enough to display "seznam.cz" instead of "google.com"...

Answer 1

I'll add this as an answer so that this question is listed as answered a solved.

We actually backtracked the problem back to Sencha Touch event handlers - they are very specific as they need to handle creating and removing of actual dom elements (the divs are created and dropped on regular basis). The events are attached to higher level "elements" like Ext.Container. That is Ext's representation of a div, that is created when it's used any may as well be removed later just to be shown after a while recreated (as a different DOM element). That would render you unable to bind any DOM events. So Sencha handles this internally. The internal handles somehow ignores event.preventDefault(), which makes the link load in both webview and childbrowser (so, yes you very quite right, Uncharted Space). The simpliest solution was still to use "non-href hrefs" (data-href). But it may be solved using internal Sencha event system if this is not option for you.