Flutter中如何隐藏InAppWebView内的链接（长按拖拽显示问题）

1. 补全WebView基础配置 #

你已经开启了disableContextMenu和disableLongPressContextMenuOnLinks，但还能补充几个配置覆盖更多场景：

initialSettings: InAppWebViewSettings(
  // 保留你原有的配置...
  disableContextMenu: true,
  disableLongPressContextMenuOnLinks: true,
  // 新增以下配置
  disableSelection: true, // 禁止文本选择，避免长按触发选择后弹出链接信息
  allowFileAccess: false, // 限制文件访问，减少不必要的系统交互
),

2. 注入JS彻底锁死链接的长按和拖拽 #

因为你的内容是React PWA，直接在WebView加载完成后注入JS，阻止链接的默认事件：
在onLoadStop回调里添加这段代码：

onLoadStop: (controller, url) {
  webViewCtrl.endRefreshing();
  // 注入JS禁用链接的长按、右键菜单和拖拽
  controller.evaluateJavascript(source: """
    // 遍历所有链接，阻止相关事件
    document.querySelectorAll('a').forEach(link => {
      // 阻止右键菜单和长按
      link.addEventListener('contextmenu', e => e.preventDefault());
      link.addEventListener('longpress', e => e.preventDefault());
      // 禁止拖拽
      link.addEventListener('dragstart', e => e.preventDefault());
      link.draggable = false;
    });
    // 针对移动端触摸长按，阻止默认选择行为
    document.addEventListener('touchstart', function(e) {
      e.preventDefault();
    }, {passive: false});
  """);
},

如果你的React页面会动态生成链接，记得用MutationObserver监听DOM变化，给新出现的链接也绑定这些事件，不然新链接会失效。

3. 处理平台特定的默认行为 #

iOS端 #

在项目的Info.plist里添加两行配置，直接禁用WebView的长按手势：

<key>WKWebViewLongPressGestureRecognizerEnabled</key>
<false/>
<key>UIWebViewLongPressGestureRecognizerEnabled</key>
<false/>

安卓端 #

在onWebViewCreated里拿到原生WebView实例，直接拦截长按和拖拽事件：

import 'dart:io'; // 记得导入这个包判断平台

// ...

onWebViewCreated: (InAppWebViewController controller) async {
  webViewCtrl.webViewController = controller;
  if (Platform.isAndroid) {
    final androidWebView = controller.androidController?.webView;
    if (androidWebView != null) {
      androidWebView.setOnLongClickListener((_) => true); // 拦截长按事件
      androidWebView.setOnDragListener((_, __) => true); // 拦截拖拽事件
    }
  }
}

4. 验证测试 #

改完之后多测几种场景：长按不同位置的链接、尝试拖拽链接，确认是否都被阻止。要是还有问题，得检查你的React PWA内部有没有自定义的长按/拖拽逻辑，这种需要在前端代码里也关掉。

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