Javascript复制内容到剪贴板，解决navigator.clipboard Cannot read property ‘writeText‘ of undefined

最新推荐文章于 2024-08-23 14:27:16 发布

东北小狐狸-Hellxz

最新推荐文章于 2024-08-23 14:27:16 发布

阅读量1.2w

点赞数 24

分类专栏：前端相关文章标签： javascript

本文链接：https://blog.csdn.net/u012586326/article/details/119946579

版权

前端相关专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了在前端实现复制文本到剪贴板功能时遇到的问题，即在非安全域中navigator.clipboard.writeText()方法无法使用。作者提供了一个兼容解决方案，通过检查当前是否处于安全域，如果是在安全域则使用navigator.clipboard.writeText()，否则回退到document.execCommand('copy')。此方法确保在不同环境下都能正确复制文本。

摘要由CSDN通过智能技术生成

起因

最近帮同事实现了一个小功能——复制文本到剪贴板，主要参考了前端大神阮一峰的博客，根据 navigator.clipboard 返回的 Clipboard 对象的方法 writeText() 写文本到剪贴板。在本地测试时一切正常，到了测试环境却提示：

Uncaught (in promise) TypeError: Cannot read property 'writeText' of undefined
at HTMLInputElement.<anonymous>

在 Chrome 的 DevTools 控制台下执行 navigator.clipboard 返回 undefined，经查找资料发现是浏览器禁用了非安全域的 navigator.clipboard 对象，哪些地址是安全的呢？

安全域包括本地访问与开启TLS安全认证的地址，如 https 协议的地址、127.0.0.1 或 localhost 。

所以本文就是作一个兼容写法，在安全域下使用 navigator.clipboard 提升效率，非安全域退回到 document.execCommand('copy'); 保证功能可用。

脚本内容

        function copyToClipboard(textToCopy) {
            // navigator clipboard 需要https等安全上下文
            if (navigator.clipboard && window.isSecureContext) {
                // navigator clipboard 向剪贴板写文本
                return navigator.clipboard.writeText(textToCopy);
            } else {
                // 创建text area
                let textArea = document.createElement("textarea");
                textArea.value = textToCopy;
                // 使text area不在viewport，同时设置不可见
                textArea.style.position = "absolute";
                textArea.style.opacity = 0;
                textArea.style.left = "-999999px";
                textArea.style.top = "-999999px";
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                return new Promise((res, rej) => {
                    // 执行复制命令并移除文本框
                    document.execCommand('copy') ? res() : rej();
                    textArea.remove();
                });
            }
        }