核心是 navigator.clipboard.writeText() 必须在用户 click 触发上下文中执行，移动端需检测兼容性，不支持时降级为 document.execCommand('copy') 并创建临时 textarea；广告中按钮需用 data-action 标识、aria-live 提示、防连点及真机多端验证。
点击按钮直接复制优惠码的 DOM 操作逻辑
核心是用 navigator.clipboard.writeText() 写入剪贴板，但必须在用户手势触发（如 click）上下文中执行，否则浏览器会拒绝。不能在页面加载后自动复制，也不能用定时器模拟点击触发。
常见错误现象：Failed to execute 'writeText' on 'Clipboard': Document is not active 或 Permission denied，基本都是因为调用时机不对或缺少用户交互。
- 按钮必须绑定原生
click事件（不能靠setTimeout延迟调用） - 优惠码建议从
data-code属性读取，避免硬编码在 JS 里，方便运营后台动态替换 - 移动端需额外检查
navigator.clipboard是否可用（iOS Safari 13.4+、Android Chrome 76+ 支持）
兼容性兜底：不支持 Clipboard API 时怎么 fallback
老版本 Safari 和部分国产安卓 WebView 不支持 navigator.clipboard，这时得退回到 document.execCommand('copy') —— 虽然已废弃，但仍是目前最广谱的兼容方案。
关键点在于：必须先创建一个临时 <textarea></textarea>，设为 visible + focus + select，再执行 execCommand；否则静默失败。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
textarea需设置position: fixed; left: -9999px;避免影响布局 - 复制后记得
remove()临时元素，防止内存泄漏 - 不要依赖
document.execCommand的返回值判断成败——它总是返回true，实际是否成功得靠后续粘贴验证
广告位中嵌入优惠码按钮的 HTML 结构规范
广告常被插入 iframe 或由第三方脚本注入，此时要注意作用域和跨域限制。如果优惠码按钮在主站域名下，但广告代码跑在子域或独立 CDN 域名，navigator.clipboard 仍可用；但如果广告完全运行在第三方 iframe 且无 allow-scripts 权限，则无法调用。
推荐结构（兼顾语义、可访问性和 JS 可控性）：
<div class="ad-coupon"> <p>限时优惠：<strong><span data-code="SUMMER2024">SUMMER2024</span></strong></p> <button type="button" data-action="copy-code">点击复制</button> <div class="toast" aria-live="polite"></div> </div>
- 用
data-action区分行为，避免用 class 名做逻辑判断（易冲突） -
aria-live="polite"让屏幕阅读器能播报“已复制”，满足无障碍要求 - 不要把优惠码写死在 button 的
innerText里——文案可能要本地化，而码必须精准
防误触与反馈体验细节
广告区域密集，用户容易连点。不加节流会导致多次 toast 弹出、甚至 clipboard 被覆盖（比如用户刚复制 A，又点了 B，结果粘贴出来是 B）。
- 按钮点击后立即
disabled并改文案为“已复制”，3 秒后恢复（用setTimeout控制，不是靠事件重置） - toast 提示建议用
position: fixed+top: 20px，避免被广告遮挡或随滚动消失 - 别用
alert()，会打断用户流程，也违反广告平台审核规范（尤其微信内嵌浏览器）
真正难的不是复制动作本身，而是让这个动作在各种广告容器、CDN 加速、iframe 隔离、低版本 WebView 下都稳定触发——每次上线前，务必在 iOS 微信、安卓 QQ 浏览器、鸿蒙系统自带浏览器里真机点一遍。
