Ionic应用从外部链接返回后InAppBrowser无响应问题求助

问题根因 #

你当前的故障核心来自login.page.ts中调用InAppBrowser时使用了_self作为打开目标：_self参数会直接用外部登录页替换当前Ionic应用所在的WebView内容，直接卸载了整个Angular运行上下文。外部登录页跳转回Ionic路由时，相当于整个应用冷重启，会出现Cordova插件桥接失效、NgZone事件捕获异常等问题，最终导致按钮点击无响应。而直接从应用内部打开map组件时没有WebView重载行为，所以功能正常。

可行解决方案 #

方案1（最优，推荐）：修改InAppBrowser打开逻辑，不替换当前WebView

将打开目标改为_blank新开独立InAppBrowser实例，监听页面加载事件捕获登录成功回调，手动控制跳转和实例关闭，完全保留原有Angular运行环境：

// login.page.ts 修改后代码
import { Router } from '@angular/router';
import { InAppBrowser, InAppBrowserEvent } from '@ionic-native/in-app-browser/ngx';

private loginUrl = 'https://test.blabla.reservation/index';
// 提前和外部登录页约定好登录成功后的回调地址，比如自定义协议头的地址
private callbackUrl = 'myapp://login/success';

constructor(
  private inAppBrowser: InAppBrowser,
  private router: Router
) {}

ngOnInit() {
  const browser = this.inAppBrowser.create(this.loginUrl, '_blank', {
    location: 'no', 
    zoom: 'no', 
    toolbar: 'no',
    hidden: 'no'
  });

  // 监听页面加载事件
  browser.on('loadstart').subscribe((event: InAppBrowserEvent) => {
    // 检测到登录成功的回调地址
    if (event.url.startsWith(this.callbackUrl)) {
      // 关闭InAppBrowser实例
      browser.close();
      // 手动路由跳转到map组件所在页面
      this.router.navigate(['/guidance']); // 替换为你map组件对应的路由地址
    }
  });
}

改完后外部登录全程在独立的InAppBrowser中运行，不会触碰原有应用的WebView上下文，从根源避免按钮失效问题。

方案2（兼容现有跳转逻辑的修复方案）：修复map组件的InAppBrowser调用逻辑

如果暂时无法修改外部登录页的跳转逻辑，可通过以下两点修复按钮点击失效问题：

1. 注入NgZone将点击逻辑包裹进Angular变更检测上下文
2. 调用前等待Cordova平台初始化完成
   修改后的map.component.ts代码如下：

import { NgZone } from '@angular/core';
import { Platform } from '@ionic/angular';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

constructor(
  private ngZone: NgZone,
  private platform: Platform,
  private inAppBrowser: InAppBrowser
) {}

async openMapApp() {
  await this.platform.ready();
  this.ngZone.run(() => {
    console.log("In openMAPPPP");
    const browser = this.inAppBrowser.create('https://www.google.com', '_system', {
      location: 'yes', 
      zoom: 'no', 
      toolbar: 'no'
    });
  });
}

内容的提问来源于stack exchange，提问作者Sol