Flutter WebView 4.x.x页面回退异常及阻止PopScope弹窗问题

嗨，我来帮你搞定这个WebView回退的问题！你遇到的情况很常见——当WebView内部还有页面历史（比如从foo.com跳转到foo.com/about）时，系统默认的返回操作触发了PopScope弹窗，而不是让WebView自己回退到上一页。咱们只需要拦截返回事件，先判断WebView能不能内部回退，再决定下一步操作就行，具体实现看下面：

首先，在你的State类里先声明WebViewController实例：

late final WebViewController controller;

然后修改你的build方法，用PopScope包裹WebViewWidget，通过它的回调来接管返回逻辑：

@override
Widget build(BuildContext context) {
  controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setBackgroundColor(const Color(0x00000000))
    ..setNavigationDelegate(
      NavigationDelegate(
        onNavigationRequest: (NavigationRequest request) async {
          if (request.url.startsWith('https://www.youtube.com/')) {
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
        onPageFinished: (url) {
          // 保留你原有的JS操作代码
          controller.runJavaScript(
              "document.getElementsByClassName('logo me-lg-4')[0].style.display='none';");
          // 这里可以继续加你其他的隐藏元素JS代码
        },
      ),
    )
    ..loadRequest(Uri.parse('https://foo.com')); // 初始加载你的目标站点

  return PopScope(
    canPop: false, // 直接关闭默认的PopScope弹窗提示
    onPopInvoked: (bool didPop) async {
      // 异步判断WebView内部是否有可回退的历史记录
      final canWebViewGoBack = await controller.canGoBack();
      
      if (canWebViewGoBack) {
        // 如果WebView能回退，就让它内部跳转回上一页（比如从foo.com/about回到foo.com）
        controller.goBack();
      } else {
        // 如果WebView已经是初始页面了，再执行Flutter路由的回退操作
        if (context.mounted) {
          Navigator.of(context).pop();
        }
      }
    },
    child: Scaffold(
      body: WebViewWidget(controller: controller),
    ),
  );
}

关键逻辑说明： #

• canPop: false：这一步是核心，直接阻止系统默认的PopScope弹窗出现，把返回的控制权完全交给我们的回调处理。
• controller.canGoBack()：这个异步方法会检查WebView内部的浏览历史，比如你从foo.com跳到foo.com/about，就会返回true，说明可以内部回退。
• 分层处理回退：优先让WebView自己处理内部页面回退，只有当WebView已经没有历史记录可回退时，再触发Flutter的路由回退，这样就完全符合你想要的逻辑了。

另外还要注意，确保你用的是WebView 4.x.x对应的WebViewWidget组件（取代了旧版本的WebView），如果你的代码里还在用旧组件，记得先升级替换哦。

备注：内容来源于stack exchange，提问作者Ram Gupta