应优先使用navigator.clipboard.writeText()，但必须在HTTPS或localhost安全上下文中由用户手势触发；若非安全上下文则降级至document.execCommand('copy')，需创建可聚焦textarea并严格按选中→执行→移除顺序操作，同时管理按钮状态与用户反馈。
剪贴板 API 在非安全上下文（如 HTTP 页面、file:// 协议）中会被现代浏览器主动禁用，navigator.clipboard 直接不可用或调用时抛 SecurityError。这不是 bug，而是强制安全策略。降级不能靠“强行启用”，而应基于环境判断 + 合理回退路径。
先判断是否处于安全上下文
不能只检测 navigator.clipboard 是否存在，还要确认当前协议是否允许调用：
- 用
window.location.protocol === 'https:' || window.location.hostname === 'localhost'做初步筛查 - 若为
http:或file:，直接跳过 Clipboard API，进入降级逻辑 - 开发调试时务必用
http://localhost（如 Live Server）而非双击打开 HTML 文件
降级到 execCommand 的关键细节
document.execCommand('copy') 是唯一可行的旧方案，但必须满足 DOM 可聚焦、可选中、不被隐藏的条件：
- 创建
textarea并插入 body，设readonly防 iOS 键盘弹出 - 用
position: absolute; left: -9999px;隐藏，禁用display: none或visibility: hidden - 插入后立即
el.select()，再调document.execCommand('copy')，顺序不能颠倒 - 复制完立刻
el.remove()，避免重复插入或内存泄漏
何时值得加降级？
不是所有项目都需要兼容老浏览器：
立即学习“前端免费学习笔记（深入）”；
- 若目标用户基本使用 Chrome 63+、Firefox 63+、Edge 79+ 或 Safari 16.4+，可直接提示“请使用 HTTPS 或升级浏览器”
- 仅当明确需支持 IE11、Safari ≤15.6 或部分国产内核浏览器时，才实现 execCommand 降级
- 降级逻辑应包裹在
try...catch或.catch()中，且仅在 Clipboard API 明确失败后触发
按钮状态与用户体验兜底
用户点击后无反馈或反复失败会降低信任感，需主动管理交互状态：
- 点击瞬间禁用按钮，文案改为“已复制”或显示 loading 动画
- 用
setTimeout固定延时（如 2s）恢复按钮，比依赖 Promise 状态更稳妥 - 失败时统一提示：“复制未生效，请手动选择并 Ctrl+C”，避免暴露技术细节
