InAppBrowser Not Auto Closing

Ionic Framework ionic-v3
1

Hello all.
Im developing a login screen using custom IonicAuth and i’m having a very annoying issue.
When the server response is positive the behaviour is as expected: the login promise is fullfilled and the
corresponding function is called.
But when the server return an error the InAppBrowser overlay do not close automatically. It stays there
showing the error message until the user hit the back button to close it. Then the corresponding reject
function is executed.
Worst yet, if i do like it’s recommended in the official docs and hide the InAppBrowser it will stop the reject
method from running (if the reponse from server is positive all is ok tho) and then the only thing the user
can do is go back to the previous screen.
I’ve found people had the same issue in Ionic v1: Custom login failure function
But it seems like this will never go away. Is this the intended working behaviour of InAppBrowser?
Does someone know if its possible to fix this? Or if i want to avoid this ugly blank screen will i need to use another API?

2

How did you implement this?

Do the same thing for the error case.

3

After trying stuff for a few more hours i give up. I cant get the InAppBrowser pop-up to auto dismiss on login rejected. Maybe on the future Ionic will change this behaviour or better doc it.
Thanks for trying to help. See ya.

4

The InAppBrowser plugin isn’t maintained by Ionic, so you may want to look into and/or open an issue on the official bug tracker:
https://issues.apache.org/jira/browse/CB/component/12320641/?selectedTab=com.atlassian.jira.jira-projects-plugin:component-summary-panel

5

What did you try? Did you do what I wrote?
What code do you have until now?

Normally you listen to page load evens or other events happening in the InAppBrowser. Here is an example of using the Cordova plugin directly (without Ionic Native) that I found in an old project of mine:

      browser.addEventListener("loadstart", (event) => {
        if ((event.url).indexOf("http://localhost/callback") === 0) {

          browser.removeEventListener("exit", (event) => {});
          browser.close();

          // do things with `event.url` here
        }
      });

You will probably want to do something similar for another event or another URL.

6

Dear @Sujan12,
When I add the line

event.url

i got error as

[ts] Property 'url' does not exist on type 'Event'.

Please advise
Anes

7

As I wrote the example uses the plugin directly, not via Ionic Native. I guess for you browser is via the Ionic Native plugin - otherwise there would be no type connected to that variable.

8

Got the solution

  this.platform.ready().then(() => {
  this.payFlag = true;
  var browserRef = window.open(pageContentUrl,"_blank","hidden=no,location=no,clearsessioncache=yes,clearcache=yes,hardwareback=no");
  browserRef.addEventListener('loadstop', function(e: InAppBrowserEvent) {
  var loc = e.url;
  if(loc == "http://tax.lsgkerala.gov.in/epayment/paymentreturn.php")
  {
        setTimeout(function () {
          browserRef.close();
        }, 5000);  
  }
  });
  });

Thanks alot

1 Like