前端实现复制功能,Uncaught TypeError: Cannot read property ‘writeText‘ of undefined

必须在安全域中运行

安全域指的是 HTTPS 或 localhost 环境。非安全域(如 http://example.com)下调用 navigator.clipboard.writeText() 会报错,例如:

bash 复制代码
Uncaught TypeError: Cannot read property 'writeText' of undefined

该 API 必须在用户触发的事件(如点击按钮)中调用,否则会被浏览器拦截。

为了在所有环境中实现复制功能,可以采用以下兼容方案:

  1. 优先使用现代 API 如果环境支持 navigator.clipboard,优先使用它以确保性能和安全性。

  2. 回退到传统方法 在非安全域或旧版浏览器中,可以使用 document.execCommand('copy') 实现文本复制。

实现代码:

bash 复制代码
function copyToClipboard(text) {
  // 检查 Clipboard API 是否可用
  if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
    return navigator.clipboard.writeText(text).then(() => {
      console.log("文本已成功复制到剪贴板(安全域)。");
    }).catch((err) => {
      console.error("复制失败:", err);
    });
  } else {
    // 非安全域或不支持 Clipboard API,使用 execCommand 兼容
    const textarea = document.createElement("textarea");
    textarea.value = text;
    textarea.style.position = "fixed"; // 避免影响页面布局
    textarea.style.top = "-9999px";
    document.body.appendChild(textarea);
    textarea.select();
    try {
      const successful = document.execCommand("copy");
      console.log(successful ? "文本已成功复制到剪贴板(非安全域)。" : "复制失败");
    } catch (err) {
      console.error("复制失败:", err);
    }
    document.body.removeChild(textarea);
  }
}
相关推荐
Super毛毛穗4 小时前
Vue中<script setup></script>的主要语法元素和特性
前端·javascript·vue.js·前端框架
h_小波14 小时前
探索 Vue.js 组件开发:从基础到进阶的完整指南
前端·vue.js·前端框架
多客软件佳佳1 天前
便捷的线上游戏陪玩、线下家政预约以及语音陪聊服务怎么做?系统代码解析
前端·游戏·小程序·前端框架·uni-app·交友
好开心331 天前
04、Vue与Ajax
前端·ajax·前端框架·vue·js
Cachel wood1 天前
Vue.js前端框架教程13:Vue空值合并?? 可选链?.和展开运算符...
linux·前端·javascript·vue.js·前端框架·ecmascript
Cachel wood2 天前
Vue.js前端框架教程10:Vue生命周期钩子onBeforeMount 和onMounted
linux·前端·javascript·vue.js·阿里云·前端框架·ecmascript
Cachel wood2 天前
Vue.js前端框架教程11:Vue监听器watch和watchEffect
前端·javascript·vue.js·git·ui·前端框架·ecmascript
蜗牛前端2 天前
🎉🎉🎉2024年末重磅推出更懂你的uni-app框架!!!
前端·前端框架·uni-app
Cachel wood2 天前
Vue.js前端框架教程14:Vue组件el-popover
前端·javascript·vue.js·python·elementui·django·前端框架
yzhSWJ2 天前
Java 后端给前端返回的long精度缺失,导致数据不一致
java·js·long