InAppBrowser.on(‘beforeload’) not working

[ionitron-bot]

I am loading html files using InAppBrowser. I want local links (trusted from domain I control) to open in InAppBrowser, and other links in phone's browser (I want to switch iab's _blank to _system before url opens).

Cordova InAppBrowser implemented some time ago new event called "beforeload" (https://github.com/apache/cordova-plugin-inappbrowser), which does not work with Ionic, and IMHO it is very important for catching navigation before it happens and handling urls that come in from opened InAppBrowser and deciding how to open those urls (eg, override _blank, with _system to open in phones browser instead InAppBrowser etc).

AFAIK It should be activated by passing beforeload: 'yes' in window options, and I did all that but event does not fire.

I checked @ionic-native/in-app-browser code and does not understand why this wouldn't work.
Any ideas?

		let winoptions : InAppBrowserOptions = {
			location : 'no',
			useWideViewPort: 'yes',
			hidenavigationbuttons : 'yes',
			hideurlbar : 'yes',
			toolbar : 'no',
			beforeload: 'yes',
		};

		let browserIab: InAppBrowserObject;
		browserIab = this.iab.create("http://example.com", "_blank", winoptions);
		browserIab.on('beforeload').subscribe(function(event) {
			console.log('NOT fired  beforeload');
		});
		browserIab.on('loadstart').subscribe(function(event) {
			console.log('--------------------fired  loadstart');
		});

ionic info

   ionic (Ionic CLI)  : 4.3.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic 5.2.7, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 21 other plugins)

System:

   ios-deploy : 1.9.2
   NodeJS     : v11.2.0 (/usr/local/Cellar/node/11.2.0/bin/node)
   npm        : 6.4.1
   OS         : macOS High Sierra
   Xcode      : Xcode 10.1 Build version 10B61

[guycalledseven]

ahh sorry not a bug. this feature was pushed 2 months ago (apache/cordova-plugin-inappbrowser#276), and v3.0.0 of cordova-plugin-inappbrowser is 10 months old. still in master branch and not tagged. :(
however, ionic-native will not work correctly (if eg. latest cordova-plugin-inappbrowser is fetched from the master branch cordova plugin add https://github.com/apache/cordova-plugin-inappbrowser`).

[wvengen]

What about version 3.1.0 recently released?

[wvengen]

^ I see we need to wait a bit, but I guess soon apache/cordova-plugin-inappbrowser#500

[Kruszylo]

version 3.1.0 is released, however I can't use beforeload event. I have latest version of inappbrowser in package.json, my code is:

let browser = this.inAppBrowser.create(link, '_self', "beforeload=yes");    
browser.on('beforeload').subscribe((event: InAppBrowserEvent) => {
   alert('before');
   console.log('before');
});

[Sroose]

@danielsogl the issue seems to be unresolved. Can you reopen this?

[JPustkuchen]

Hi @Sroose,

I can't confirm this. I'm using beforeload with "get" instead of "yes" (perhaps its wrong in the docs example) and for me it works as expected!

I'm using version 3.1.0

var webAppWindow = cordova.InAppBrowser.open(this.config.webAppUrl, '_blank', 'location=no,beforeload=get,zoom=no,toolbar=no,enableViewportScale=yes');
webAppWindow.addEventListener('beforeload', this.onBeforeLoad.bind(this, webAppWindow), false);

[...]

onBeforeLoad: function(webAppWindow, params, callback){
    // Special handling of downloads. InAppBrowser doesn't handle them
    // so we have to manually preprocess and open in system browser:
    if(params.url.match(".pdf")){
      this.openWithSystemBrowser(webAppWindow, params.url);
    } else {
      callback(params.url);
    }
  },

[kgkg]

Hi @JPustkuchen,

sure, it can be done this way in Ionic 3. The problem is, in Ionic 4 we can't use addEventListener, because there is new api based on Observer pattern like .on('beforeLoad').subscribe(...) and there is probably no way to can pass any more argument to subscribe handler.

[benvallack]

This is still an issue. I'm trying to start this as a v3 project to get around this issue but even that uses angular and typescript so I can't see to figure it out! Going to try v2 now. Does anyone know how we can utilise the beforeload system?

[mread1208]

Yes, I had this same issue and ended up putting in a fix with PR #3249.

Essentially, with that fix you can now call the _beforeAfterLoad method inside your beforeload listener as the callback method:

const inAppBrowserRef = this.iab.create(url, "_blank", options);
inAppBrowserRef.on("beforeload").subscribe((evt: InAppBrowserEvent) => {
    if(evt.url === "something..."){
        // Do something
    } else {
       // Move along
       inAppBrowserRef._loadAfterBeforeload(evt.url);
    }
});

[benvallack]

This is excellent news - thanks so much for replying and the fix. I'll check it out.

[mread1208]

Sure thing! I banged my head on this for several days so I hope this helps.

They merged my code in back in December, but I'm not sure what version of the npm package contains the fix (whether it's v4 or v5 of Ionic Native Core)... What I ended up doing was keeping a fork of my fix in Github and referencing that fork directly in my package.json file since our app still uses Ionic v3:

...
"@ionic-native/geolocation": "^4.20.0",
"@ionic-native/in-app-browser": "git+https://github.com/mread1208/ionic-native.git",
"@ionic-native/keyboard": "^4.20.0",
"@ionic-native/native-geocoder": "^4.20.0",
...

[benvallack]

This is super helpful - we've been battling with this for months! Thanks so much.

[sphilippi-modus]

I have this on my package.json file
"@ionic-native/in-app-browser": "5.5.1",
"@ionic-native/core": "5.12.0",

and still can't use your workaround @mread1208. Do you or anyone here knows what can I do besides using that fork? (cannot use unofficial forks on the company I'm working for).
Thanks in advance!

[mread1208]

I'm able to use this in our implementation and I see the code still exists in the master branch, so things should work: https://github.com/ionic-team/ionic-native/blob/master/src/%40ionic-native/plugins/in-app-browser/index.ts#L184

Do you have an example of how you're implementing? Do you have the "beforeload" option set to "yes" when you're instantiating the InAppBrowser instance?

const options: InAppBrowserOptions = {
    // Other opts....
    beforeload: "yes"
}
const inAppBrowserRef = this.iab.create(url, "_blank", options);
inAppBrowserRef.on("beforeload").subscribe((evt: InAppBrowserEvent) => {
    if(evt.url === "something..."){
        // Do something
    } else {
       // Move along
       inAppBrowserRef._loadAfterBeforeload(evt.url);
    }
});

[sphilippi-modus]

Thanks @mread1208 for the response. During the last weekend I've updated to Ionic Enterprise InAppBrowser and everything worked like a charm. Again, thank you for creating this workaround for the subscribe method!