Flutter应用中如何关闭WebView并返回上一页面

我来帮你搞定这个需求！在Flutter里要实现WebView内的用户操作触发页面关闭返回上一页，核心就是打通网页和Flutter代码的通信，下面我给你两种最常用的实现方案，你可以根据自己的场景选择：

方案一：利用JavaScript通道（推荐，适用于你能控制网页代码的场景） #

这个方案通过在Flutter和WebView之间建立一个JavaScript通信通道，让网页里的事件可以主动通知Flutter执行页面关闭操作。

步骤1：配置WebView并建立通信通道 #

首先确保你已经引入了官方的webview_flutter包（在pubspec.yaml里添加依赖后执行flutter pub get），然后在WebView页面的代码里这样写：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewPage extends StatefulWidget {
  final String targetUrl;
  const WebViewPage({super.key, required this.targetUrl});

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late WebViewController _webViewController;

  @override
  void initState() {
    super.initState();
    _webViewController = WebViewController()
      // 必须开启JavaScript支持，否则通信通道无法工作
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      // 添加自定义的JavaScript通道，名称要和网页里的对应
      ..addJavaScriptChannel(
        'CloseWebViewChannel',
        onMessageReceived: (JavaScriptMessage message) {
          // 收到网页发来的关闭指令后，返回上一页面
          if (message.message == 'trigger_close') {
            Navigator.of(context).pop();
          }
        },
      )
      // 加载目标网页
      ..loadRequest(Uri.parse(widget.targetUrl));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('网页操作页')),
      body: WebViewWidget(controller: _webViewController),
    );
  }
}

步骤2：在网页中触发关闭指令 #

在你的网页代码里，当用户点击按钮或者完成指定动作时，调用我们建好的通信通道发送消息。比如网页里的按钮点击事件：

// 假设网页里有一个id为"completeBtn"的按钮
document.getElementById('completeBtn').addEventListener('click', function() {
  // 检查通信通道是否存在，避免报错
  if (window.CloseWebViewChannel) {
    // 向Flutter发送关闭指令
    window.CloseWebViewChannel.postMessage('trigger_close');
  }
});

如果是表单提交完成后触发，就把这段代码放到表单的成功回调里就行。

方案二：拦截特定URL（适用于无法修改网页代码的场景） #

如果你没法修改网页的代码（比如加载的是第三方网页），可以通过拦截网页的特定跳转URL来触发关闭操作。我们约定一个专属的URL协议（比如flutter://close-webview），当网页跳转到这个URL时，Flutter就执行页面关闭。

代码示例如下：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewPage extends StatefulWidget {
  final String targetUrl;
  const WebViewPage({super.key, required this.targetUrl});

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late WebViewController _webViewController;

  @override
  void initState() {
    super.initState();
    _webViewController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          onNavigationRequest: (NavigationRequest request) {
            // 拦截约定的关闭URL
            if (request.url.startsWith('flutter://close-webview')) {
              Navigator.of(context).pop();
              // 阻止这个URL的实际跳转
              return NavigationDecision.prevent;
            }
            // 其他URL正常跳转
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadRequest(Uri.parse(widget.targetUrl));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('第三方网页页')),
      body: WebViewWidget(controller: _webViewController),
    );
  }
}

这种情况下，只要第三方网页里有跳转到flutter://close-webview的操作（比如按钮的href设为这个值，或者JS里执行window.location.href = 'flutter://close-webview'），就能触发Flutter的页面关闭。

内容来源于stack exchange