Opening two instances of InAppBrowser (_system and _blank) prevents events from triggering

Question

We’re currently developing an app with cordova and the InAppBrowser plugin. We're trying to spawn two different IAB instances at the same time. One with the _system browser and another with the _blank option.

The problem we have is that once we open the instance of _system browser, it seems we lose the reference to the previous browser. For this reason, the close event never triggers on the _blank IAB after the _system browser is closed.

This is how the actual code looks like.

// Opening iab main window
var ref = window.open(global.chat_mediador, '_blank','location=no,toolbar=yes');

var handleEvents =  function(event) {

    // Closing the iab window 
    if (event.url.match('#close')) {
        ref.close();
    }

    // Trigger custom event
    if (event.url.match('#openccard')) {
        window.open('https://www.test.example.url.com?customerID=' + event.customerId, '_system', 'location=yes');
    }

}

// InAppBrowser events

// This events are duplicated because loadstop works on android and
// loadstart works on ios.
ref.addEventListener('loadstart', handleEvents, false);
ref.addEventListener('loadstop', handleEvents, false);

// Removing the dialog when we close the chat
ref.addEventListener('exit', function(event) {
    generali.dialog.close();
}, false);

As you can see we open the first url within the application with the _blank option. Then if in the child application a button is pressed we want to open an instance of a browser in the _system browser.

We’ve tried (without luck) to:

Have a separate reference for the _system browser.

window.open(global.url_ficha + customerId, '_system','location=no');
var cardsRef = window.open(
    'https://www.test.example.url.com?customerID=' + customerId,
    '_system', 
    'location=yes'
);         

Trigger a custom event outside the reference of the _blank browser

 if (event.url.match('openccard')) {
     var customerId = event.url.split('openccard-')[1];
     var evt = document.createEvent("Event");
     evt.initEvent("openccard",true,true);
     evt.customerId = customerId;
     document.dispatchEvent(evt);
 }

Anyone has an idea of what's happening?

Answer 1

It seems that you need to initialize the IAB each time you do a new window.open() if you don't do that the event listeners don't work.

If I use that code it works like a charm.

window.openIAB = function(url, target, options) {

    var self = this;
    var ref = window.open(url, target, options);

    var handleChildEvents = function(ev) {

        if (ref != undefined) {

            // Closing the iab window 
            if (ev.url.match('#close')) {
                ref.close();
                ref = undefined;
            }

            // Opening card url with system browser
            if (ev.url.match('#openccard')) {
                var customerId = ev.url.split('#openccard-')[1];
                self.ref2 = self.openIAB(
                    'https://www.test.com?customerID=' + customerId,
                    '_system', 
                    'location=yes'
                );
            }

        } else {
            console.log('InAppBrowser has no reference');
        }

    };

    ref.addEventListener('loadstart', handleChildEvents);
    ref.addEventListener('loadstop', handleChildEvents);

    ref.addEventListener('loaderror', function(ev) {
        console.log('error while loading page');
        ref.close();
        ref = undefined;
    });

    ref.addEventListener('exit', function(ev) {
        dialog.close();
    });

    return ref;
};