使用 flutter 中的 webView 从重定向 url 读取响应

Question

我试图使用 WebView flutter 库添加支付网关。成功完成支付后，网关重定向到返回 url 或带有交易响应的 webhook。 现在，我不想重定向到 url 之外的某些地方，而是想重定向到我的应用程序，并想从发送的响应中读取事务的状态。 我只想知道交易是成功还是失败。

'''

WebView(
  navigationDelegate: (action) {
    return NavigationDecision.navigate;
  },
  onPageStarted: (url) => _onPageStart(url),
  onPageFinished: (url) => _onPageFinish(url),
   gestureNavigationEnabled: true,
  debuggingEnabled: true,
  javascriptMode: JavascriptMode.unrestricted,
  initialUrl: url,
  onWebViewCreated: (WebViewController webcontroller) {
    _controller = webcontroller;
  },
),

void _onPageStart(url) {
  Future<String> future = _controller
      .runJavascriptReturningResult("window.document.body.outerHTML");
  future.then((data) {
    print("ONpage start $data");
  });
}


Future<void> _onPageFinish(url) async {
    Future<String> future = _controller
        .runJavascriptReturningResult("window.document.body.outerHTML");
    future.then((data) {
      print(data);
    });
  }

'''

Answer 1

您所要做的就是简单地将 javascript 通道添加到您的 webview 中，如下所示：

   WebView(
      onPageStarted: (url) => _onPageStart(url),
      onPageFinished: (url) => _onPageFinish(URL),
      gestureNavigationEnabled: true,
      debuggingEnabled: true,
      javascriptMode: JavascriptMode.unrestricted,
      initialUrl: URL,
      javascriptChannels: <JavascriptChannel>{
                _toasterJavascriptChannel(context),
              },
    );
    
/*
create functionality on your web side also for this javascript channel
use the name 'Toaster' on the web side also ( use same name on web side and app side , name can be anything 'toaster' is example shown here)
 */
    JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
        return JavascriptChannel(
            name: 'Toaster',
            onMessageReceived: (JavascriptMessage message) {
              // ignore: deprecated_member_use
              Scaffold.of(context).showSnackBar(
                SnackBar(content: Text(message.message)),
              );
            });
      }

当您点击网站上的任何 function 时，在 web 端调用此 Toaster javascriptChannel，它也会在应用端监听