Android WebView中剪贴板复制功能失效问题求助

1. 前端降级方案（无需修改原生App代码） #

多数移动端WebView环境不支持navigator.clipboardAPI，可改用兼容更广的document.execCommand('copy')实现复制，同时做异常处理：

const copyURL = () => {
  const shareURL = window.location.origin;
  // 创建临时输入框承载要复制的内容
  const tempInput = document.createElement('input');
  tempInput.value = shareURL;
  document.body.appendChild(tempInput);
  
  // 选中输入框内容
  tempInput.select();
  
  try {
    const isSuccess = document.execCommand('copy');
    alert(isSuccess ? 'URL复制成功' : '复制失败，请手动复制');
  } catch (err) {
    alert('复制失败，请手动复制');
  } finally {
    // 移除临时输入框
    document.body.removeChild(tempInput);
  }
}

HTML按钮代码（React项目保持onClick={copyURL}即可）：

<button type="button" onClick="copyURL()">COPY</button>

2. 原生WebView桥接方案（需修改App端代码） #

如果必须使用剪贴板API，可通过JS与原生App交互的方式实现，以下是Android和iOS的具体实现：

Android端 #

1. 原生WebView注册JS交互接口：

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);

// 注册JS调用原生的桥接接口
webView.addJavascriptInterface(new Object() {
    @JavascriptInterface
    public void copyToClipboard(String content) {
        ClipboardManager clipboard = (ClipboardManager) getSystemService(Context.CLIPBOARD_SERVICE);
        ClipData clip = ClipData.newPlainText("WebViewURL", content);
        clipboard.setPrimaryClip(clip);
    }
}, "NativeClipboard");

2. 前端调用原生方法：

const copyURL = () => {
  const shareURL = window.location.origin;
  window.NativeClipboard.copyToClipboard(shareURL);
  alert('URL复制成功');
}

iOS端 #

1. 原生WKWebView配置消息处理器：

class WebViewController: UIViewController, WKScriptMessageHandler {
    override func viewDidLoad() {
        super.viewDidLoad()
        let webConfig = WKWebViewConfiguration()
        let userContentController = WKUserContentController()
        // 注册消息监听
        userContentController.add(self, name: "copyToClipboard")
        webConfig.userContentController = userContentController
        
        let webView = WKWebView(frame: view.bounds, configuration: webConfig)
        view.addSubview(webView)
    }

    // 处理JS发送的消息
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "copyToClipboard", let text = message.body as? String {
            UIPasteboard.general.string = text
        }
    }
}

2. 前端调用原生方法：

const copyURL = () => {
  const shareURL = window.location.origin;
  window.webkit.messageHandlers.copyToClipboard.postMessage(shareURL);
  alert('URL复制成功');
}

问题原因 #

报错Cannot read property 'writeText' of undefined是因为当前WebView环境未实现navigator.clipboardAPI——该API属于较新的Web标准，部分移动端WebView（尤其是旧系统版本的WebView）对其支持不完善，导致navigator.clipboard为undefined。

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