Flutter InAppWebView安卓端调用剪贴板API遇权限拒绝问题

环境信息 #

问题描述 #

网页中使用Navigator.clipboard.writeText复制文本，iOS端正常，Android端报错：

(android) WebView ID {{webviewID}} calling "onConsoleMessage" using {messageLevel: 3, message: NotAllowedError: Write permission denied.}

已在AndroidManifest.xml中开启外部存储权限，但问题依旧，且Web权限API（navigation）对Android WebView支持有限。

解决方法 #

1. 配置WebView基础权限

初始化InAppWebView时，开启必要的Android WebView设置：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("你的网页地址")),
  androidSettings: AndroidInAppWebViewSettings(
    allowContentAccess: true,
    allowFileAccess: true,
    domStorageEnabled: true,
  ),
)

2. 通过JavaScript通道用Flutter原生实现复制

由于Android WebView对Web Clipboard API支持不足，可通过JS桥接让网页调用Flutter原生剪贴板功能：

• 注册Flutter侧的JS处理方法：

  InAppWebView(
    initialSettings: InAppWebViewSettings(
      javaScriptEnabled: true,
    ),
    onWebViewCreated: (controller) {
      controller.addJavaScriptHandler(
        handlerName: "copyText",
        callback: (args) {
          String text = args[0];
          Clipboard.setData(ClipboardData(text: text));
          return "复制成功";
        },
      );
    },
  )
  

• 修改网页中的复制逻辑，适配Android平台：

  async function copyToClipboard(text) {
    if (/Android/i.test(navigator.userAgent)) {
      try {
        const result = await window.flutter_inappwebview.callHandler('copyText', text);
        alert(result);
      } catch (e) {
        console.error('复制失败:', e);
      }
    } else {
      await navigator.clipboard.writeText(text);
      alert('复制成功');
    }
  }
  

3. 确认系统权限配置

Android 13及以上版本无需存储权限即可访问剪贴板，但如果适配低版本，可在AndroidManifest.xml中添加：

<!-- 适配Android 12及以下版本 -->
<uses-permission android:name="android.permission.READ_CLIPBOARD_IN_BACKGROUND" />

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