inapp browser window.open does not trigger loadstart or loadstop events

Question

I have very simple code but it does not trigger any of the load events - window opens page loads but events are not triggered.

var ref = window.open('http://localhost:3000/#/login','_blank','location=no'); 

ref.addEventListener('loadstart', function(event) {
    log.info('in loadstart ');
});

ref.addEventListener('loadstop', function(event){
    log.info('in loadstop ');
});

https://plnkr.co/edit/ubEk8UN6SGXkYV7PgFZZ?p=preview - Plunkr code to see what is the problem and suggest solution.

Simple 10-15 lines of code but ate all my weekend to figure out what went wrong

Answer 1

From the docs for window.open:

Note that remote URLs won't load immediately. When window.open() returns, the window always contains about:blank. The actual fetching of the URL is deferred and starts after the current script block finishes executing. The window creation and the loading of the referenced resource are done asynchronously.

So try wrapping your event listeners in a window.setTimeout

function openInApp(){
    var ref = window.open('http://google.com/','_blank','location=no'); 
    window.setTimeout(function(){
      ref.addEventListener('loadstart', function(event) {
          console.log('in loadstart ');
          alert('start: ' + event.url);
      });
    }, 1000);
}

Assuming you have no same-origin problems, that should now work.