AddEventListener not working for InAppBrowser

Ionic Framework ionic-v3
1

I’m trying to implement AddeventListener to listen ‘Exit’ and ‘LoadStart’ for InAppBrowser in IONIC2

my html

<button (click)="browsersystem('https://www.google.com')" > URL</button> 

.TS file

 browsersystem(url:string)
{
  this.platform.ready().then(() => {
        let browser=open(url, "_system", "location=true"); 
        browser.addEventListener('exit',()=>
        {
          console.log('Browser Closed');
          alert('Browser Closed');

        })

        browser.addEventListener('loadstart',()=>
        {
console.log('Browser STARTED');

        })
        });

}
No errors on console.

Is there something am i missing ??

2

Hi I’m trying to get to grips with the InAppBrowser on Ionic 2 as well.

From your code, I’d say that you need to include;

import {InAppBrowser} from 'ionic-native';

then your initialisation line would need to be:

let browser = InAppBrowser.open(url, "_system", "location=true");

Have you tried that?

Tom

3

Hi,
I updated ionic-native to 1.3.20 but now InAppBrowser.open(…) returns Void and so I don’t know how to add an event listener.
How can I do it?

Thanks,
Stefano

4

Yes all the syntax has now changed.

this.browser = new InAppBrowser( this.target_URL, "_blank", "EnableViewPortScale=yes,closebuttoncaption=Done" );

works for me with ionic native 1.3.17

If you’re using event listeners, the syntax is now:

this.browser.on("loadstop")
                 .subscribe(
                    () => {
                      this.loadURLtoMemory();
                    },
                    err => {
                      console.log("InAppBrowser Loadstop Event Error: " + err);
});

Hope that helps

2 Likes
5

With your code I have this error:

Can't resolve all parameters for InAppBrowser: (?, ?, ?).
6

OK. I just copied it and pasted it from a working app.

I assume that you didn’t use:

this.target_URL

and put your desired URL in?

Same goes for the event listener,

this.loadURLtoMemory();

is clearly my own code.

7

No I obviously changed your code and I founded the problem.
With the old code I used providers: [ InAppBrowser ] in the Component declaration and this was the cause of the error. I don’t know why.

Thanks

1 Like
8

hey guzs i want to open play store app form my ionic 2 app… how i do that…currently i able to open in InAppBrowser…but i want open app…how i do that?

9

Never tried it but the only way to do it would be to listen to the browser loadstop event (see above) and then inject a Javascript routine, using

this.browser.injectScript( { code: "document.getElementById("myCheck").click();" } ).then( ()=> {

console.log("button clicked");

});

to get the app started somehow.

10

Hey i tried your code but i get below error

TypeError: this.iabRef.on is not a function

Code that i used

iabRef: any;

this.iabRef = InAppBrowser.open(’…/PaymentGwRes.html’, ‘_blank’, ‘location=true’);

this.iabRef.on("loadstart")
            .subscribe(
            () => {
                this.iabLoadStart(this);
            },
            err => {
                console.log("InAppBrowser loadstart Event Error: " + err);
            });
11

I have not been using the loadstart event as I could not get it to work.

See if loadstop works, you’ll probably notice that event firing 3 or four times so you’ll have to code around that.

12

But also, you’re using the wrong syntax for your instance of the InAppBrowser.

As it states above:

this.browser = new InAppBrowser( this.target_URL, “_blank”, “EnableViewPortScale=yes,closebuttoncaption=Done” );

Not:

this.iabRef = InAppBrowser.open(‘…/PaymentGwRes.html’, ‘_blank’, ‘location=true’);

I’d be interested to hear if the loadstart event works for you.

13

loadstart, loadstop nothing works…

14

Finally Fixed… I have delete ionic-native folder and install ionic-native again then install ionic plugin add cordova-plugin-inappbrowser again then it’s start working…

15

when i write below line…i got error Supplied argument do not match any signature of call target

import {InAppBrowser} from ‘ionic-native’;

this.iabRef = new InAppBrowser(‘build/pages/PaymentGateway/PaymentGwRes.html’, “_blank”, “EnableViewPortScale=yes,closebuttoncaption=Done”);

16

How i delete native folder and where is that folder?

17

I’ve never tried to open a page from my own build in the InAppBrowser, I’ve only used external URLs.

Why would you be doing that, just out of interest?

If you want the latest version of Ionic Native, run

npm i --save ionic-native@latest

18

ionic-native folder is located at under node_modules folder

please take backup of your original ionic-native folder for safety…

after delete this folder you can run following command

npm install ionic-native --save

20

i want to added payment gateway … so for that i tried to implement payment gateway response listener .
if u have any example for integrate payment gateway…please share with me…i tried to integrate payumoney payment gateway

21

just force angular changedetection

for debug:
setInterval(()=>{},500);