Flutter Web端WebView如何检测页面变化及判断支付结果？

方案一：通过JavaScript Channel实现网页与Flutter通信 #

这是最直接的方式，需要你能控制支付页面的前端代码：

• 在Flutter端配置JavaScript Channel，接收网页发送的支付状态：

  WebView(
    initialUrl: '你的支付页面地址',
    javascriptMode: JavascriptMode.unrestricted,
    javascriptChannels: {
      JavascriptChannel(
        name: 'PayResultChannel',
        onMessageReceived: (JavascriptMessage message) {
          switch (message.message) {
            case 'success':
              // 执行支付成功逻辑，比如跳转首页、显示成功提示
              break;
            case 'fail':
              // 执行支付失败逻辑，比如重新发起支付、显示错误提示
              break;
          }
        },
      ),
    },
  )
  

• 在支付页面的JS代码中，当支付完成并跳转至结果页时，主动向Flutter发送状态：

  // 页面加载完成后判断当前URL并发送状态
  window.addEventListener('DOMContentLoaded', () => {
    const currentUrl = window.location.href;
    if (currentUrl.includes('pay_success')) {
      window.PayResultChannel?.postMessage('success');
    } else if (currentUrl.includes('pay_fail')) {
      window.PayResultChannel?.postMessage('fail');
    }
  });
  

方案二：注入JS脚本监听WebView内部URL变化 #

如果无法修改支付页面代码，可以通过注入定时监听脚本获取URL变化：

WebView(
  initialUrl: '你的支付页面地址',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (WebViewController controller) {
    // 注入URL监听脚本
    controller.runJavascript('''
      let prevUrl = window.location.href;
      setInterval(() => {
        const currUrl = window.location.href;
        if (currUrl !== prevUrl) {
          prevUrl = currUrl;
          window.PayResultChannel.postMessage(currUrl);
        }
      }, 500);
    ''');
  },
  javascriptChannels: {
    JavascriptChannel(
      name: 'PayResultChannel',
      onMessageReceived: (JavascriptMessage message) {
        const url = message.message;
        if (url.contains('pay_success')) {
          // 处理支付成功
        } else if (url.contains('pay_fail')) {
          // 处理支付失败
        }
      },
    ),
  },
)

注意：定时监听会有一定性能消耗，可根据实际情况调整间隔时间。

方案三：结合后端回调（最可靠方案） #

前端URL判断存在被篡改的风险，建议配合后端回调做最终校验：

1. 发起支付时，后端生成唯一订单ID，前端携带该ID跳转至支付页面；
2. 支付平台完成支付后，回调你的后端接口，后端更新订单状态；
3. Flutter Web端在支付结束后，轮询后端接口查询订单状态：

   Future<void> queryPayStatus(String orderId) async {
     try {
       final response = await http.get(Uri.parse('/api/pay/status?orderId=$orderId'));
       if (response.statusCode == 200) {
         final data = jsonDecode(response.body);
         if (data['status'] == 'success') {
           // 支付成功逻辑
         } else {
           // 支付失败逻辑
         }
       }
     } catch (e) {
       // 处理请求异常
     }
   }
   

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