如何在webview_flutter中监听图片长按事件并获取图片URL

要实现WebView内图片长按获取URL的功能，核心是通过JavaScript注入+Flutter与JS通信来实现，具体步骤如下：

1. 配置WebViewController与JS通信通道 #

首先初始化WebViewController时，启用JavaScript并创建通信通道，用于接收JS传递的图片URL：

final WebViewController controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..addJavaScriptChannel(
    'ImageLongPressChannel',
    onMessageReceived: (JavaScriptMessage message) {
      // 处理接收到的图片URL
      String imageUrl = message.message;
      // 示例：弹出对话框展示URL
      showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: const Text('图片URL'),
          content: Text(imageUrl),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('确定'),
            ),
          ],
        ),
      );
    },
  );

2. 注入JavaScript监听图片长按 #

在WebView页面加载完成后，注入JS代码，实现对现有及动态加载图片的长按监听：

controller.loadRequest(Uri.parse('你的网页地址'));

controller.setNavigationDelegate(
  NavigationDelegate(
    onPageFinished: (String url) {
      // 注入监听逻辑的JS代码
      controller.runJavaScript('''
        // 给单张图片绑定长按事件
        function bindLongPress(img) {
          img.addEventListener('contextmenu', function(e) {
            e.preventDefault(); // 阻止默认右键菜单
            // 转换为绝对URL并传给Flutter
            const absoluteUrl = new URL(this.src, window.location.href).href;
            ImageLongPressChannel.postMessage(absoluteUrl);
          });
        }

        // 给页面现有图片绑定事件
        document.querySelectorAll('img').forEach(bindLongPress);

        // 监听DOM变化，给动态新增的图片绑定事件
        const observer = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length > 0) {
              mutation.addedNodes.forEach(function(node) {
                if (node.tagName === 'IMG') {
                  bindLongPress(node);
                } else if (node.querySelectorAll) {
                  node.querySelectorAll('img').forEach(bindLongPress);
                }
              });
            }
          });
        });

        observer.observe(document.body, {
          childList: true,
          subtree: true
        });
      ''');
    },
  ),
);

3. 关键注意点 #

• 用new URL(this.src, window.location.href).href可将相对路径的图片地址转为绝对URL，避免获取到不完整的路径
• 如果网页有内容安全策略（CSP），需确保允许注入的JS代码执行，必要时调整网页的CSP配置
• 测试懒加载、动态生成的图片场景，确认MutationObserver能正确捕获新增图片并绑定事件

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