Flutter WebView加载网页后导航菜单(三点按钮)点击无响应如何解决

核心原因 #

点击页面三点导航无响应，本质是WebView默认未开启网页交互所需的全部权限，常见触发场景包括：

• 菜单点击依赖JS弹窗/新窗口加载，WebView默认拦截了这类行为
• 网页依赖DOM存储、本地缓存等能力，未开启时JS执行中断
• 混合内容权限配置不全，HTTP/HTTPS混合资源加载失败导致菜单逻辑失效

完整修复方案（基于flutter_inappwebview） #

替换原有代码，补全所有交互所需配置即可：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

void main() async {
  // 可选：开启WebView调试模式，方便排查问题
  if (Platform.isAndroid) {
    AndroidInAppWebViewController.setWebContentsDebuggingEnabled(true);
  }
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WebView Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('WebView Demo')),
        body: InAppWebView(
          // 注意URL必须带http/https前缀，不能直接填写域名
          initialUrlRequest: URLRequest(url: Uri.parse("替换为你的网站完整URL")),
          initialOptions: InAppWebViewGroupOptions(
            crossPlatform: InAppWebViewOptions(
              javaScriptEnabled: true,
              javaScriptCanOpenWindowsAutomatically: true,
              domStorageEnabled: true,
              cacheEnabled: true,
              useShouldOverrideUrlLoading: true,
            ),
            android: AndroidInAppWebViewOptions(
              mixedContentMode: AndroidMixedContentMode.MIXED_CONTENT_ALWAYS_ALLOW,
              supportMultipleWindows: true,
              allowFileAccess: true,
            ),
            ios: IOSInAppWebViewOptions(
              allowsInlineMediaPlayback: true,
            )
          ),
          // 处理新窗口打开请求，适配菜单跳转新页逻辑
          onCreateWindow: (controller, createWindowAction) async {
            await controller.loadUrl(urlRequest: createWindowAction.request);
            return true;
          },
          // 可选：打印网页控制台信息，方便定位JS报错
          onConsoleMessage: (controller, consoleMessage) {
            debugPrint("网页日志：${consoleMessage.message}");
          },
        ),
      ),
    );
  }
}

额外排查项 #

如果配置后仍然无响应，可按以下步骤排查：

• 确认网站URL填写完整，必须携带http://或https://前缀
• 临时隐藏AppBar测试，排查是否是网页fixed定位的菜单被AppBar遮挡导致点击无响应
• 通过Chrome的chrome://inspect工具连接调试WebView，查看点击菜单时是否有JS报错

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