apache / apache/cordova-plugin-inappbrowser

Beforeload event is not fired the 2,4,6 time.

Open
#911 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
Java
Stars
1.1k
Forks
2.2k
PR merge metrics
No merged PRs in 30d

Description

# Bug Report

## Problem
beforeload is called at every second click

### What is expected to happen?
beforeload should be called at every click

### What does actually happen?
First time you click on a link in the InAppBrowser I get the following events:
beforeload
loadstart
loadstop
When clicking a second time on the same link or another link I get only the following events:
loadstart
loadstop
When clicking a third time on a link I get again the beforeload event
beforeload
loadstart
loadstop

### Command or Code
```
import {
Component,
NgZone,
OnInit,
TemplateRef,
ViewChild,
} from '@angular/core';
import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core';
import { ConfigService } from '../core/services/config.service';
import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { AuthenticationService } from '../core/services/authentication.service';

export const LOCAL_TOKEN_STORAGE = 'ACCOUNT_API_TOKEN';
declare var cordova: any;

@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'],
})
export class DashboardComponent implements OnInit {
numbers: number[];
public searchText: string;
public applictionList: Array<{
number: number;
name: string;
description: string;
}> = [];
src: any;
iabRef: any = null;
closeModal: string;
@ViewChild('modalData', { static: true }) modalData: TemplateRef;

constructor(
private translate: TranslateService,
public readonly configService: ConfigService,
private modalService: NgbModal,
public authService: AuthenticationService,
private ngZone: NgZone
) {
this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => {
this.createApplicationList();
});
}

ngOnInit(): void {
this.createApplicationList();
}

// function to return list of numbers from 0 to n-1
numSequence(n: number): Array {
return Array(n);
}

iabBeforeLoad(event: any, callback: any): void {
console.log(event.type + ' - ' + event.url);
console.log(' callback: ' + callback);

// If the URL being loaded is a PDF
if (event.url.match('.pdf') || event.url.match('.ashx')) {
// Open PDFs in system browser (instead of InAppBrowser)
// cordova.InAppBrowser.open(event.url, '_system');
this.ngZone.run(() => {
this.iabRef.hide();
this.src = event.url;
this.triggerModal(this.modalData);
});
//
} else {
// Invoke callback to load this URL in InAppBrowser
callback(event.url);
}
}

iabLoadStart(event: any): void {
console.log(event.type + ' - ' + event.url);
}

iabLoadStop(event: any): void {
console.log(event.type + ' - ' + event.url);

this.iabRef.executeScript({
code: `
var links = document.getElementsByTagName("a");
console.log(links);
for (var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('.pdf') > -1 || links[i].href.indexOf('.ashx') > -1)
{
links[i].target = "_self";
console.log("change target", links[i]);
}
}
`,
});
}

iabLoadError(event: any): void {
console.log(event.type + ' - ' + event.message);
}

iabClose(event: any): void {
console.log(event.type);
// this.iabRef.removeEventListener(
// 'beforeload',
// (params: any, callback: any) => this.iabBeforeLoad(params, callback)
// );
// this.iabRef.removeEventListener('loadstart', (params: any) =>
// this.iabLoadStart(params)
// );
// this.iabRef.removeEventListener('loadstop', (params: any) =>
// this.iabLoadStop(params)
// );
// this.iabRef.removeEventListener('loaderror', (params: any) =>
// this.iabLoadError(params)
// );
// this.iabRef.removeEventListener('exit', (params: any) =>
// this.iabClose(params)
// );
}

openUrl(url: string): void {
const translatedUrl = this.translate.instant(url);
if (this.configService.isApp()) {
// Open InAppBrowser on initial page
this.iabRef = cordova.InAppBrowser.open(
translatedUrl,
'_blank',
'location=yes,beforeload=yes'
);

// Add beforeload event handler which is called before each new URL is loaded into the InAppBrowser Webview
this.iabRef.addEventListener('beforeload', (params, callback) =>
this.iabBeforeLoad(params, callback)
);

this.iabRef.addEventListener('loadstart', (params) =>
this.iabLoadStart(params)
);

this.iabRef.addEventListener('loadstop', (params) =>
this.iabLoadStop(params)
);

this.iabRef.addEventListener('loaderror', (params) =>
this.iabLoadError(params)
);

this.iabRef.addEventListener('exit', (params) => this.iabClose(params));
} else {
window.open(translatedUrl, '_blank');
}
}

createApplicationList(): void {
this.applictionList = [];

for (let i = 1; i <= 14; i++) {
this.applictionList.push({
number: i,
name: this.translate.instant('Applications.App' + i + 'Name'),
description: this.translate.instant(
'Applications.App' + i + 'Description'
),
});
}
}

triggerModal(content): void {
console.log('triggerModal is called');
this.modalService
.open(content, {
ariaLabelledBy: 'modal-basic-title',
windowClass: 'custom-modal',
})
.result.then(
(res) => {
this.closeModal = `Closed with: ${res}`;
this.ngZone.run(() => {
this.iabRef.show();
});
},
(res) => {
this.closeModal = `Dismissed ${this.getDismissReason(res)}`;
this.ngZone.run(() => {
this.iabRef.show();
});
}
);
}

private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}

// PDF ‘downloaden’ als een bytearray
getPdfXhr(url: string, success: (array) => void, fallback: Function) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.setRequestHeader(
'Authorization',
`Bearer ${localStorage.getItem(LOCAL_TOKEN_STORAGE)}`
);

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = () => {
try {
const arrayBufferView = xhr.response;
success(arrayBufferView);
} catch (error) {
error('Could not get document ' + error);
}
};

xhr.send(`\"${url}\"`);
}
}
```

### Environment, Platform, Device
Android

### Version information
"cordova-plugin-inappbrowser": "^5.0.0"

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the behavior through cordova.InAppBrowser.open with cordova-plugin-inappbrowser 5.0.0 on Android, focusing on the beforeload listener and the subsequent link clicks. Trace the Android InAppBrowser implementation to determine why beforeload is skipped, then verify that it fires for every click and that existing loadstart and loadstop behavior remains intact.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, angular, java, typescript
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.