如何实现点击按钮自动复制WebView内全部文本的功能

这个需求完全可以实现，核心逻辑是向WebView注入JS脚本获取已渲染页面的全量文本，再将文本写入系统剪切板，全程不需要用户手动操作。

通用JS获取文本逻辑 #

所有平台通用的获取页面文本的JS语句如下，直接在WebView环境执行即可返回当前页面的纯文本内容：

// 获取纯文本内容
document.body.innerText
// 如果需要保留HTML格式的富文本，换成下面的语句
// document.body.innerHTML

Android端实现 #

1. 首先给WebView开启JS执行权限：

webView.settings.javaScriptEnabled = true

2. 按钮点击事件中触发JS执行，拿到结果后写入剪切板：

copyBtn.setOnClickListener {
    // 执行JS获取页面文本
    webView.evaluateJavascript("document.body.innerText") { result ->
        // 去除返回结果自带的外层双引号
        val content = result?.replace("\"", "")?.trim() ?: return@evaluateJavascript
        // 写入系统剪切板
        val clipboardManager = getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
        val clipData = ClipData.newPlainText("webview_copy_content", content)
        clipboardManager.setPrimaryClip(clipData)
        // 可自定义复制成功提示
        Toast.makeText(this, "内容已复制到剪切板", Toast.LENGTH_SHORT).show()
    }
}

iOS端实现 #

1. 初始化WKWebView时开启JS执行权限：

let config = WKWebViewConfiguration()
config.preferences.javaScriptEnabled = true
let webView = WKWebView(frame: view.bounds, configuration: config)

2. 按钮点击事件中触发JS执行，拿到结果后写入剪切板：

@objc func copyBtnClick() {
    webView.evaluateJavaScript("document.body.innerText") { [weak self] result, error in
        guard let content = result as? String, error == nil else { return }
        // 写入系统剪切板
        UIPasteboard.general.string = content
        // 可自定义复制成功提示
        let alert = UIAlertController(title: nil, message: "内容已复制到剪切板", preferredStyle: .alert)
        self?.present(alert, animated: true)
        DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
            alert.dismiss(animated: true)
        }
    }
}

注意事项 #

• 只要是WebView已经正常渲染的内容，即使是第三方站点的页面也可以正常读取文本，不受同源策略限制
• Android 11及以上版本系统会自动弹出剪切板写入提示，无需额外自定义Toast
• 如果页面内容较长，JS执行可能有100ms以内的延迟，属于正常现象

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