search

apache / cordova-plugin-inappbrowser

Apache Cordova InAppBrowser Plugin
https://cordova.apache.org/
Apache License 2.0
1.12k stars 2.15k forks source link

Route change in angular webapp cannot detect using ionic 4 Inapp browser #727

Open NIYASSURABHI opened 4 years ago

NIYASSURABHI commented 4 years ago

Bug Report

Problem

Cannot detect route (url change)change of angular webapp using inappbrowser. i have to close inappbrowser when url changing.but change cannot detect. its alaways showing the same url i passed.

What is expected to happen?

Have to close Inapp browser when url changing in angular web app.

What does actually happen?

Url not changing

Information

Ionic 4 Inapp browser

Command or Code

var options = "location=no,toolbar=yes"; const browser = this.iab.create('my url', '_blank', options); browser.on('loadstart').subscribe((event) => {

  var reg = "login";
  if (event.url.toString().includes('login/') && !event.url.toString().toLowerCase().includes(reg.toLowerCase())) {
    browser.close();
    this.navctrl.navigateRoot('/auth');
  }
});

Environment, Platform, Device

Version information

package.json ``` { "name": "visipal", "version": "0.0.1", "author": "Ionic Framework", "homepage": "https://ionicframework.com/", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/common": "^8.2.14", "@angular/core": "^8.2.14", "@angular/forms": "^8.2.14", "@angular/http": "^7.2.15", "@angular/platform-browser": "^8.2.14", "@angular/platform-browser-dynamic": "^8.2.14", "@angular/router": "^8.2.14", "@capacitor/cli": "^1.0.0-beta.25", "@capacitor/core": "^1.0.0-beta.25", "@ionic-native/app-version": "^5.19.1", "@ionic-native/call-number": "^5.19.1", "@ionic-native/camera": "^5.19.1", "@ionic-native/core": "^5.19.1", "@ionic-native/date-picker": "^5.19.1", "@ionic-native/email-composer": "^5.19.1", "@ionic-native/file": "^5.19.1", "@ionic-native/geolocation": "^5.24.0", "@ionic-native/globalization": "^5.19.1", "@ionic-native/google-maps": "^5.5.0", "@ionic-native/in-app-browser": "^5.19.1", "@ionic-native/keyboard": "^5.19.1", "@ionic-native/launch-navigator": "^5.23.0", "@ionic-native/local-notifications": "^5.19.1", "@ionic-native/native-geocoder": "^5.19.1", "@ionic-native/native-storage": "^5.19.1", "@ionic-native/network": "^5.19.1", "@ionic-native/splash-screen": "^5.19.1", "@ionic-native/sqlite": "^5.19.1", "@ionic-native/status-bar": "^5.19.1", "@ionic-native/toast": "^5.19.1", "@ionic/angular": "^4.11.5", "@ionic/storage": "^2.2.0", "@mauron85/cordova-plugin-background-geolocation": "^3.1.0", "@types/hammerjs": "^2.0.36", "call-number": "^1.0.1", "cordova-android": "^8.1.0", "cordova-android-support-gradle-release": "^3.0.1", "cordova-ios": "^5.1.1", "cordova-plugin-actionsheet": "^2.3.3", "cordova-plugin-add-swift-support": "^2.0.2", "cordova-plugin-app-version": "^0.1.9", "cordova-plugin-badge": "^0.8.8", "cordova-plugin-camera": "^4.1.0", "cordova-plugin-datepicker": "^0.9.3", "cordova-plugin-device": "^2.0.3", "cordova-plugin-dialogs": "^2.0.2", "cordova-plugin-email-composer": "^0.9.2", "cordova-plugin-file": "^6.0.2", "cordova-plugin-geolocation": "^4.0.2", "cordova-plugin-globalization": "^1.11.0", "cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps", "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git", "cordova-plugin-inappbrowser": "^3.1.0", "cordova-plugin-ionic-keyboard": "^2.2.0", "cordova-plugin-ionic-webview": "^4.1.3", "cordova-plugin-local-notification": "^0.9.0-beta.2", "cordova-plugin-nativegeocoder": "^3.2.2", "cordova-plugin-nativestorage": "^2.3.2", "cordova-plugin-network-information": "^2.0.2", "cordova-plugin-splashscreen": "^5.0.3", "cordova-plugin-statusbar": "^2.4.3", "cordova-plugin-whitelist": "^1.3.4", "cordova-plugin-x-toast": "^2.7.2", "cordova-sqlite-storage": "^3.4.1", "core-js": "^2.5.4", "hammerjs": "^2.0.8", "ionic-angular": "^3.9.9", "ionic-long-press": "^2.0.1", "ionic-swipe-all": "^2.0.0", "ionic2-calendar": "^0.5.7", "moment": "^2.24.0", "mx.ferreyra.callnumber": "0.0.2", "rxjs": "^6.5.4", "rxjs-compat": "^6.5.4", "tslib": "^1.9.0", "uk.co.workingedge.phonegap.plugin.launchnavigator": "^5.0.4", "zone.js": "~0.9.1" }, "devDependencies": { "@angular-devkit/architect": "^0.803.19", "@angular-devkit/build-angular": "^0.803.24", "@angular-devkit/core": "^8.3.19", "@angular-devkit/schematics": "^8.3.19", "@angular/cli": "~8.3.19", "@angular/compiler": "~8.2.14", "@angular/compiler-cli": "~8.2.14", "@angular/language-service": "~8.2.14", "@ionic/angular-toolkit": "^2.1.1", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~12.0.0", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~8.1.0", "tslint": "~5.16.0", "typescript": "~3.5.3" }, "description": "An Ionic project", "cordova": { "plugins": { "cordova-plugin-whitelist": {}, "cordova-plugin-statusbar": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-ionic-webview": { "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+" }, "cordova-plugin-ionic-keyboard": {}, "cordova-plugin-x-toast": {}, "cordova-plugin-globalization": {}, "cordova-plugin-nativestorage": {}, "cordova-sqlite-storage": {}, "cordova-plugin-network-information": {}, "mx.ferreyra.callnumber": {}, "cordova-plugin-camera": { "ANDROID_SUPPORT_V4_VERSION": "27.+" }, "cordova-plugin-email-composer": { "ANDROID_SUPPORT_V4_VERSION": "27.+" }, "cordova-plugin-inappbrowser": {}, "cordova-plugin-app-version": {}, "cordova-plugin-datepicker": {}, "cordova-plugin-nativegeocoder": { "LOCATION_WHEN_IN_USE_DESCRIPTION": "Use geocoder service" }, "call-number": {}, "cordova-plugin-file": {}, "cordova-plugin-googlemaps": {}, "uk.co.workingedge.phonegap.plugin.launchnavigator": { "GOOGLE_API_KEY_FOR_ANDROID": "", "OKHTTP_VERSION": "3.12.0", "LOCATION_USAGE_DESCRIPTION": "This app requires access to your location for navigation purposes" }, "cordova-plugin-background-geolocation": { "GOOGLE_PLAY_SERVICES_VERSION": "11+", "ANDROID_SUPPORT_LIBRARY_VERSION": "26+", "ICON": "@mipmap/icon", "SMALL_ICON": "@mipmap/icon", "ACCOUNT_NAME": "@string/app_name", "ACCOUNT_LABEL": "@string/app_name", "ACCOUNT_TYPE": "$PACKAGE_NAME.account", "CONTENT_AUTHORITY": "$PACKAGE_NAME", "ALWAYS_USAGE_DESCRIPTION": "This app always requires location tracking", "MOTION_USAGE_DESCRIPTION": "This app requires motion detection" }, "cordova-android-support-gradle-release": { "ANDROID_SUPPORT_VERSION": "27.+" }, "cordova-plugin-geolocation": {} }, "platforms": [ "android", "ios" ] } } ```

Checklist

antikalk commented 4 years ago

Have you tried calling it within ngZone?

  constructor(private _ngZone: NgZone [, ...]) {}

  [...]
  if (event.url.toString().includes('login/') && !event.url.toString().toLowerCase().includes(reg.toLowerCase())) {
    browser.close();
    this._ngZone.run(() => { this.navctrl.navigateRoot('/auth'); });
  }
  [...]
timbru31 commented 4 years ago

Your issue is missing the required version information, can you please add those? Otherwise, we are unable to help.

Thanks!

NIYASSURABHI commented 4 years ago

Your issue is missing the required version information, can you please add those? Otherwise, we are unable to help.

Thanks!

I have updated my question with the package json file.

NIYASSURABHI commented 4 years ago

Have you tried calling it within ngZone?

  constructor(private _ngZone: NgZone [, ...]) {}

  [...]
  if (event.url.toString().includes('login/') && !event.url.toString().toLowerCase().includes(reg.toLowerCase())) {
    browser.close();
    this._ngZone.run(() => { this.navctrl.navigateRoot('/auth'); });
  }
  [...]

Now i tried with ngzone also. but no use. same as before. my url is not changing. it always showing the same url in inappbrowser even after page is changed.

timbru31 commented 4 years ago

Your issue is missing the required version information, can you please add those? Otherwise, we are unable to help. Thanks!

I have updated my question with the package json file.

Thanks. However, it's still not clear if this affect iOS, Android or both.

NIYASSURABHI commented 4 years ago

Your issue is missing the required version information, can you please add those? Otherwise, we are unable to help. Thanks!

I have updated my question with the package json file.

Thanks. However, it's still not clear if this affect iOS, Android or both.

its affect both iOS and Android.

NIYASSURABHI commented 4 years ago

Any help..

tkau87 commented 4 years ago

Hi

I had the exact same issue. If you navigate to your path '/login' using this.navctrl.navigateRoot('/login') (or nagigateByUrl as i did), the events 'loadstop / loadstart' will not be triggered, instead try to use window.href = http://yourredirectionurl.com It worked fine for me, the url change was detected and loadstart and loadstop events were triggered properly after that

xuanphu123 commented 3 years ago

@NIYASSURABHI on angular site....try using <a href="/back.html">back</a> then u can detect url change on "loadstart" or "loadstop" .