如何在离子的inAppBrowser内的后退按钮上添加确认弹出窗口

Question

I have added an inAppBrowser and now after going inside the browser,

Expectation : if i click the hardware back button, i want to show a confirmation popup with option leave page and Cancel

Actual : It is calling the Exit event and closing the inAppBrowser

in my x.ts file :

this.inAppBrowser.on('exit').subscribe(
    () => {
      this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
      console.log('orientation after browser close: ' + this.screenOrientation.type);
    }
  );

My issue is that, do we have any way or workaround to detect backbutton click instead of exit ?

Answer 1

According to documentation plugin has its own logic for the hardware back button:

hardwareback : set to yes to use the hardware back button to navigate backwards through the InAppBrowser's history. If there is no previous page, the InAppBrowser will close. The default value is yes, so you must set it to no if you want the back button to simply close the InAppBrowser.

So, the answer - no. You do have not the possibility to set up the logic for the back button inside the Ionic application. But you can fork this plugin, implement this feature and use it.

Answer 2

I suggest creating a dedicated page where you open the inappbrowser (ngOnInit). This page should be full-screen with the question "Are you sure you want to exit?" and 2 buttons "Yes" / "No". If the user presses on "Yes" exit the app, if the user presses "No" reopen the inappbrowser. This way if the inappbrowser is closed, it will show the dedicated page, that acts as your confirmation button...

Sorry but the code won't work.

Edit

this.platform.backButton.subscribeWithPriority(100, () => {
    if (window.confirm('Are you sure you want to exit, amigo?')){
      navigator['app'].exitApp();
    }
});