Issues with implementing AddEventListener in InAppBrowser on IONIC 2

I am currently working on implementing AddeventListener to listen for 'Exit' and 'LoadStart' events in InAppBrowser within IONIC2.

Here is my HTML:

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

And here is my TypeScript 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 are showing up on the console, but I feel like I might be missing something. Any ideas?

Answer №1

import {InAppBrowser} from 'ionic-native';

...

let browser=InAppBrowser.open(url, "_system", "location=true");
browser.addEventListener('exit',()=>
{
  console.log('Browser Closed');
  alert('Browser Closed');
});

Although this may not align with the official documentation or expected behavior, I have found that this approach works effectively for me.

Answer №2

Here is a solution that should work:

this.platform.ready().then(success => {
      let browser = new InAppBrowser(url, '_system');
      browser.on('exit').subscribe(
            () => {
              console.log('done');
            },
      err => console.error(err));
      });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What order should jquery files be included in?

Today I ran into an issue while trying to add datepicker() to my page. After downloading jqueryui, I added the scripts in the following order: <script type="text/javascript" src="js/jquery.js"></script> <script src="js/superfish.js">< ...

Troubleshooting problem with infinite scrolling in AngularJS with Ionic framework

I recently created a webpage with an infinite scroll page load more script using Ionic AngularJS. However, I encountered an issue where the page restarts from the beginning once it reaches the bottom. Below is the HTML code snippet: <ion-content class ...

utilize dynamic variables in post-css with javascript

Question: Is it possible to dynamically set or change variables from JavaScript in post-css? I have a react component with CSS3 animations, and I want to set dynamic delays for each animation individually within each component. I've found a similar s ...

Tips for making an input form that triggers an alert popup

After creating an HTML form with text input, utilizing Javascript for validation as shown below: I am trying to trigger an alert box thanking the user for entering data when the submit button is clicked. I have faced challenges in implementing this witho ...

I'm having trouble understanding why this code is causing confusion for the user's selection during a specific part of the execution. I can't seem

In this memory game, event listeners respond to user input after a sequence of colored divs change color to appear illuminated. The expected behavior is that once the user clicks on the correct div in the right order, the sequence restarts with an additi ...

Error encountered in ASP.NET MVC application when using jQuery POST method: data is null

I am currently utilizing a PartialView and injecting it into a <div> from another PartialView to create a popup modal using the Bootstrap Modal. Although my Bootstrap Modal is displaying correctly, it is not functioning as intended. The following are ...

An issue was encountered in the node_modules folder while attempting to access the 'Exclude' name in the lodash collection file. The error message reads: (1783,24): error TS2304: Cannot

When attempting to execute the ng serve command, I encountered an error. See below for more details. ERROR in node_modules/@types/lodash/common/collection.d.ts(1783,24): error TS2304: Cannot find name 'Exclude'. ... (error list continued) .. ...

What is the significance of the dollar sign prefix ($) in Vue.js?

Can you explain the significance of the dollar symbol prefix used before property names in Vue.js? For instance, consider this code snippet: this.$emit('clicked', 'demo') ...

Following the execution of the Ajax function in JavaScript, the functionality of the

My JavaScript validation function checks if an input value is empty. I now want to enhance it by adding a validation that ensures a special input is not being repeated. I have written a PHP function and utilized AJAX for this purpose. The AJAX part seems t ...

A new URL must be refreshed for the link to properly bind the data received from the API call with the subscribe method

In my Angular application, I have a URL link that fetches data from the backend API using the subscribe method in a component. The expected behavior is that when this URL is accessed in a browser, the data should be displayed in the corresponding HTML comp ...

Neglectful TypeScript null checks overlooking array.length verification

When TypeScript is compiled with strict null checks, the code snippet below does not pass type checking even though it appears to be correct: const arr: number[] = [1, 2, 3] const f = (n: number) => { } while (arr.length) { f(arr.pop()) } The comp ...

Adding elements to an array in Node.js

In my 'both' object, I need to store 2 arrays: eng and fr. Each of these arrays contains multiple objects. How can I transfer all values from frDisplayData to fr:[] within the 'both' object: const displayData = []; var both = {eng:dis ...

Utilizing Material UI (mui) 5.0 within an iframe: Tips and tricks

Attempting to display MUI components within an iframe using react portal has resulted in a loss of styling. Despite being rendered within the iframe, MUI components seem to lose their visual appeal when displayed this way. Most resources discussing this is ...

Click once to reveal, click twice to conceal the slider

I currently have a web page set up so that a single click on the text displays a slider for selecting a range of values. Now, I want to incorporate a feature where a double click will remove the slider. Below is the HTML code: <!DOCTYPE html> < ...

The type 'Observable<any>' cannot be assigned to the type 'Observable<T>'

Here is the code I am working with: import {HttpClient} from '@ngular/common/http'; private httpClient: HttpClient; do_request(method: string, url: string, ...

Implementing a variable for an array in Angular 4: A step-by-step guide

I need help determining the correct value for skill.team[variable here].name in Angular, where all team names are retrieved from the skill. Below is the code snippet: HTML <select [(ngModel)]="skill.teams[1].name" name="teamName" id="teamName" class= ...

Is there a way to activate custom and default validators for validation on an ng2 template form?

Within my ng2 form, I am utilizing a control that looks like this: <input class="form-field" type="text" id="fieldName" name="fieldName" #fieldName="ngModel" (ngModelChange)="onFieldNameChange($event)" [(ngModel)]="model.f ...

Enhance the HTML content using a JavaScript function

Here is the code that I have: <label>Brand</label></br> <select name="brand" id="brand" onChange="changecat(this.value);"> <option value="" selected>Select Brand</option> <option value="A">AMD</option&g ...

Setting up Node on a Ubuntu system

Currently, I am in the process of installing Node.js to run my Angular2 program. However, I encountered an error during the installation: npm WARN npm npm does not support Node.js v0.10.25 npm WARN npm You should probably upgrade to a newer version of nod ...

Ways to Conceal <div> Tag

I need help with a prank .html page I'm creating for a friend. The idea is that when the user clicks a button, a surprise phrase pops up. I have managed to hide and unhide the phrase successfully using JavaScript. However, my issue is that when the pa ...