InAppBrowser loses eventhandler after opening URL in system browser


#1

I have an app opening an external URL in the InAppBrowser. What i want to do is opening some links that are not on the same server in the system browser. As far as i tried, this works. Problem is, after opening a system browser, the InAppBrowser in the app loses it’s subscription of the loadstart event. I tried to reinit the loadstart event in different ways, but i never can get it up and running again. This is my code (created in a clean _blank Ionic project).

What am i missing?

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser, InAppBrowserEvent  } from '@ionic-native/in-app-browser';

declare var cordova : any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    inAppBrowserRef : any;
    sUrl : string = "http://external.url/test.php";
    previousUrl : string;
    
    constructor(public navCtrl: NavController, private iab: InAppBrowser)
    {
        // Remember the previous URL to go back to when an url is opened in the system browser
        this.previousUrl = this.sUrl;
        
        // The iab
        this.inAppBrowserRef = iab.create(this.sUrl);
        
        // on loadstart, check if the URL must be opened in the app browser or open the system browser
        this.inAppBrowserRef.on('loadstart').subscribe(event : InAppBrowserEvent => {
            this.loadStartEventHandler(event);
        });
    }
    
    public loadStartEventHandler(event)
    {
        var url = event.url;
        
        // Only URL's from example.com are opened in the system browser
        if (url.toLowerCase().indexOf("https://www.example.com") !== -1)
        {
            var ref = this.iab.create(url, '_system');
            this.setInappBrowserUrl(this.previousUrl); // Go back to the previous URL
        }
    }
    
    public setInappBrowserUrl(overrideUrl)
    {
        this.inAppBrowserRef.executeScript({ code: "window.location.replace('" + overrideUrl + "');" });
        
        // Because one way or another, the event handler is lost :(
        // Try to reinit ... but doesn't work
        /*
        this.inAppBrowserRef.on('loadstop').subscribe(event => {
            this.inAppBrowserRef.on('loadstart').subscribe(event => {
                this.loadStartEventHandler(event);
            });
        });
        */
    }
}

#2

After a lot of searching and trying different stuff i fixed it with some help of another site wich i dont know if i could place the URL to. Here is my fix:

    public loadStartEventHandler(event)
    {
        var url = event.url;
        
        // Only URL's from example.com are opened in the system browser
        if (url.toLowerCase().indexOf("https://www.example.com") !== -1)
        {
            var ref = this.iab.create(url, '_system');
            
            // The official solution is to register the same event callbacks with the new InAppBrowser. 
            // Since InAppBrowser does not trigger events at all for the system browser, you do not need to worry about triggering double event callbacks. 
            // This solution restores event handling to the old (local webapp) InAppBrowser.
            ref.on('loadstart').subscribe(event => {
                this.loadStartEventHandler(event);
            });
            
            this.setInappBrowserUrl(this.previousUrl); // Go back to the previous URL
        }
    }