解决http下navigator.clipboard为undefined问题

最新推荐文章于 2025-02-06 11:18:42 发布

zhu_zhu_xia

最新推荐文章于 2025-02-06 11:18:42 发布

阅读量7.5k

点赞数 7

分类专栏：前端文章标签： http 网络协议网络

本文链接：https://blog.youkuaiyun.com/zhu_zhu_xia/article/details/132354488

版权

前端专栏收录该内容

3 篇文章

订阅专栏

文章讲述了在开发环境中利用navigator.clipboard实现复制功能正常，但在服务器部署到http域名时会显示undefined，原因是clipboardAPI仅在HTTPS和localhost有效。作者提供了在HTTP环境下手动模拟`copy`操作的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发环境下使用navigator.clipboard进行复制操作，打包部署到服务器上后，发现该功能显示为undefined；查相关资料后，发现clipboard只有在安全域名下才可以访问(https、localhost)，在http域名下只能得到undefined；

解决方案如下：

let clipboard = navigator.clipboard || {
          writeText: (text) => {
            let copyInput = document.createElement('input');
            copyInput.value = text;
            document.body.appendChild(copyInput);
            copyInput.select();
            document.execCommand('copy');
            document.body.removeChild(copyInput);
          }
        }
        if (clipboard) {
          await clipboard.writeText(this.formData.url);
          this.$message.success('复制成功');
        }