Ionic应用中支付完成后关闭InAppBrowser的实现问题

我来帮你分析下代码里的问题，然后给出可行的解决方案：

先说说你当前代码的核心问题 #

1. 错误调用browser.close()：你在executeScript的注入代码里直接写了browser.close()，但这个方法是Ionic端的InAppBrowser实例方法，网页里的JavaScript根本访问不到这个对象，相当于你在应用启动时就直接执行了关闭操作，而不是在用户点击关闭按钮时触发。
2. 目标窗口选择错误：用_self作为打开目标会替换当前Ionic应用的WebView，导致后续的exit事件监听完全失效——因为此时browser实例已经不再指向独立的支付窗口了。
3. 注入脚本语法错误：你的executeScript代码里函数定义没正确闭合，括号和引号的配对都有问题，脚本根本无法正常执行。

推荐两种可靠的解决方案 #

方案一：通过支付回调URL自动关闭（最常用，兼容性最好）

大部分支付网关都支持配置支付完成/取消后的回调URL，我们可以监听InAppBrowser的页面加载事件，当检测到回调URL时主动关闭窗口：

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

constructor(private iab: InAppBrowser, private navCtrl: NavController) {}

openPaymentGateway() {
  const production_url = "你的支付网关地址";
  // 必须用_blank打开独立窗口，避免替换应用WebView
  const options: InAppBrowserOptions = {
    zoom: 'yes',
    location: 'yes',
    toolbar: 'yes' // 保留工具栏，也方便用户手动关闭
  };
  const browser = this.iab.create(production_url, '_blank', options);

  // 监听页面加载，检测支付回调URL
  browser.on('loadstart').subscribe(event => {
    const currentUrl = event.url;
    // 这里替换成你的支付网关回调URL（比如支付成功/取消的跳转地址）
    if (currentUrl.includes("payment-success") || currentUrl.startsWith("yourapp://payment-closed")) {
      browser.close(); // 自动关闭浏览器
    }
  });

  // 监听关闭事件，返回首页
  browser.on('exit').subscribe(() => {
    this.navCtrl.setRoot(HomePage);
  }, err => {
    console.error("退出事件异常:", err);
  });
}

方案二：通过网页消息通信触发关闭（适合自定义关闭按钮场景）

如果支付网关允许你修改页面按钮的点击逻辑，可以通过注入脚本让网页向应用发送消息，应用收到消息后关闭窗口：

openPaymentGateway() {
  const production_url = "你的支付网关地址";
  const options: InAppBrowserOptions = {
    zoom: 'yes',
    location: 'yes',
    toolbar: 'yes'
  };
  const browser = this.iab.create(production_url, '_blank', options);

  // 向支付页面注入监听按钮点击的脚本
  browser.executeScript({
    code: `
      // 替换成支付页面关闭按钮的选择器（比如id/class）
      const closeButton = document.getElementById("payment-close-btn");
      if (closeButton) {
        closeButton.addEventListener('click', () => {
          // 向应用发送关闭指令
          window.postMessage('close-inappbrowser', '*');
        });
      }
    `
  }).then(() => {
    console.log("关闭按钮监听脚本注入成功");
  }).catch(err => {
    console.error("注入脚本失败:", err);
  });

  // 监听网页发送的消息
  browser.on('message').subscribe(msg => {
    if (msg.data === 'close-inappbrowser') {
      browser.close();
    }
  });

  // 关闭后返回首页
  browser.on('exit').subscribe(() => {
    this.navCtrl.setRoot(HomePage);
  }, err => {
    console.error("退出事件异常:", err);
  });
}

额外注意事项 #

1. 确保已经正确安装InAppBrowser插件：

   ionic cordova plugin add cordova-plugin-inappbrowser
   npm install @ionic-native/in-app-browser
   

2. 如果使用自定义Scheme（比如yourapp://）作为回调URL，需要在config.xml里添加允许导航的规则：

   <allow-navigation href="yourapp://*" />
   <allow-navigation href="你的支付网关域名/*" />
   

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