Ionic Capacitor iOS应用中In App Browser URL变更事件失效问题

针对你开发的 Capacitor+Ionic 应用中，iOS 设备仅能触发 loadstart、loadstop、loadexit 事件，其他 URL 变更场景（如 SPA 路由跳转、hash 变化）无法触发事件的问题，可通过以下步骤解决：

1. 明确 iOS 平台的事件限制 #

cordova-plugin-inappbrowser 在 iOS 上基于 WKWebView 实现，原生层仅会在页面完全加载新的 HTTP(S) 链接时触发 loadstart/loadstop；对于页面内的路由变化（如 SPA 的 hash 切换、pushState 跳转），不会触发原生事件，需要手动注入脚本监听。

2. 修复代码中的变量错误 #

你的 loadstartextLinks 方法中，this.externalBrowser(url, options) 里的 url 未定义，应改为 event.url，否则会导致逻辑中断：

loadstartextLinks(event, options) {
  console.log('inside loadstart handler');
  if (
    event.url.includes('tel:') ||
    event.url.includes('mailto:')
  ) {
    this.handleExternalURLs(event);
  }
  if (event.url.includes('https://www.google.com/')) {
    this.handleExternalURLs(event);
    this.externalBrowser(event.url, options); // 修正为 event.url
  }
}

3. 注入脚本监听页面内 URL 变化 #

在 loadstop 事件中注入 JavaScript 代码，监听页面的 hash 变化、popState 及 pushState 操作，通过 Cordova 事件机制将 URL 变化同步到应用层：

browser.on('loadstop').subscribe((event) => {
  console.log('loadstop no saml');
  this.loadstartextLinks(event, options);

  // 注入URL监听脚本
  browser.executeScript({
    code: `
      // 监听hash变化
      window.addEventListener('hashchange', () => {
        window.cordova.fireDocumentEvent('inappbrowser-url-change', { url: window.location.href });
      });
      // 监听popState
      window.addEventListener('popstate', () => {
        window.cordova.fireDocumentEvent('inappbrowser-url-change', { url: window.location.href });
      });
      // 重写pushState，捕获手动路由跳转
      const originalPushState = history.pushState;
      history.pushState = function(state, title, url) {
        originalPushState.call(this, state, title, url);
        window.cordova.fireDocumentEvent('inappbrowser-url-change', { url: window.location.href });
      };
    `
  }).then(() => {
    console.log('URL监听脚本注入完成');
  });
});

// 监听自定义URL变化事件
document.addEventListener('inappbrowser-url-change', (customEvent: any) => {
  const urlEvent = { url: customEvent.detail.url };
  this.loadstartextLinks(urlEvent, options);
});

4. 升级插件版本 #

检查并升级 cordova-plugin-inappbrowser 到最新稳定版，同时保持 @awesome-cordova-plugins/in-app-browser 版本与之兼容，部分旧版本存在 iOS 事件处理的 bug。

5. 验证配置选项 #

确保创建 InAppBrowser 时的 options 配置正确，iOS 上需保证未禁用 JavaScript：

const options = 'location=no,toolbar=yes,enableViewportScale=yes,javaScriptEnabled=yes';

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