如何检测WebView中支付操作是否完成？webview_flutter导航代理无输出

先搞定navigationDelegate无输出的问题 #

• 先确认WebView初始化时确实正确配置了navigationDelegate参数，别漏写：

WebView(
  initialUrl: '你的支付页面地址',
  navigationDelegate: (NavigationRequest request) {
    print('当前请求的URL：${request.url}');
    return NavigationDecision.navigate;
  },
  // 这个必须开启，否则JS相关交互会被限制
  javascriptMode: JavascriptMode.unrestricted,
)

• 检查支付页面的提交按钮是不是用AJAX/JS异步提交的——这类操作不会触发页面跳转，自然不会调用navigationDelegate。
• 确认javascriptMode设置为JavascriptMode.unrestricted，没开的话很多JS行为会被限制，导航检测也可能失效。

异步提交的情况？用JS注入监听按钮点击 #

如果支付按钮是异步提交，直接通过JS注入来监听点击事件就行：

1. 先存好WebViewController，在页面加载完成后注入监听代码：

WebViewController? webViewController;

WebView(
  initialUrl: '你的支付页面地址',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (controller) {
    webViewController = controller;
  },
  onPageFinished: (url) {
    // 把"pay-submit"换成你页面里支付按钮的实际ID
    webViewController?.runJavascript("""
      document.getElementById('pay-submit').addEventListener('click', function() {
        window.flutter_inappwebview.callHandler('paymentSubmitted');
      });
    """);
  },
  javascriptChannels: <JavascriptChannel>{
    JavascriptChannel(
      name: 'paymentSubmitted',
      onMessageReceived: (JavascriptMessage message) {
        // 这里就是用户点击提交后的回调，处理你的业务逻辑即可
        print('用户点击了支付提交按钮！');
      },
    ),
  },
)

2. 要是不知道按钮ID，也可以通过按钮文本或其他属性定位，比如按钮上写着“确认支付”：

// 定位包含"确认支付"文本的按钮
document.querySelector('button:contains("确认支付")').addEventListener('click', function() {
  window.flutter_inappwebview.callHandler('paymentSubmitted');
});

如果页面元素加载慢，还可以在JS里加个延迟，或者用MutationObserver等元素加载完成后再绑定监听。

额外注意事项 #

• 若支付页面有跨域限制，需确保WebView允许JS交互，避免被页面的CSP策略拦截。
• 可以先拿一个简单的跳转页面测试navigationDelegate是否正常输出，排除WebView本身的配置问题。

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