Search code examples
angularjscordovaionic-frameworkionic3inappbrowser

browser.addEventListener is not a function

When I load the app it gives me the error shown at the bottom. Everything looks right, any ideas? Thanks in advance.

It uses InAppBrowser to display a website, then tries to add an EventListener which I will use to see when a specific url is entered.

Code (home.ts): 

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser, InAppBrowserOptions } from "@ionic-native/in-app-browser";
import { Platform } from 'ionic-angular';
import { AppAvailability } from '@ionic-native/app-availability';

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

  constructor(public navCtrl: NavController, private inAppBrowser: InAppBrowser, public platform: Platform, private appAvailability: AppAvailability)
  {
      const options: InAppBrowserOptions = 
      {
          toolbar: 'no',
          location: 'no',
          zoom: 'no'
      }


     this.platform.ready().then( () => {

         const browser = this.inAppBrowser.create("https://www.awebsite.co.uk/", '_blank', options);
            browser.addEventListener('loadstop', function(event) { alert(event.type + ' - ' + event.url); } );
     });
  }

Error:

Error: Uncaught (in promise): TypeError: browser.addEventListener is not a function
TypeError: browser.addEventListener is not a function
    at http://localhost:8100/build/main.js:74:21
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:5134:33)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)
    at r.run (http://localhost:8100/build/polyfills.js:3:10143)
    at http://localhost:8100/build/polyfills.js:3:20242
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5125:33)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:10834)
    at c (http://localhost:8100/build/polyfills.js:3:19752)
    at http://localhost:8100/build/polyfills.js:3:20273
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5125:33)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:10834)
    at o (http://localhost:8100/build/polyfills.js:3:7894)
    at e.invokeTask [as invoke] (http://localhost:8100/build/polyfills.js:3:16823)
    at p (http://localhost:8100/build/polyfills.js:2:27648)
    at HTMLDocument.v (http://localhost:8100/build/polyfills.js:2:27893)
Solution

  • Try to use browser.on('loadstop').subscribe, instead of browser.addEventListener.

    browser.on('loadstop').subscribe(event => { 
    alert(event.type + ' - ' + event.url); 
});