关于navigator.clipboard.writeText使用遇到的坑

最新推荐文章于 2025-02-01 22:46:06 发布

Leaderzjy

最新推荐文章于 2025-02-01 22:46:06 发布

阅读量5.4k

点赞数 7

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45006814/article/details/130581659

版权

文章介绍了在HTTP协议下，浏览器限制使用navigator.clipboard对象的情况，为了解决这个问题，提供了一个兼容HTTP的解决方案，通过创建隐藏的textarea，选中文本并执行复制命令来实现文本复制到剪贴板的功能。

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

navigator.clipboard.writeText在http协议下不可用的坑，浏览器禁用了非安全域的 `navigator.clipboard` 对象，安全域包括本地访问与开启TLS安全认证的地址，如 `https` 协议的地址、`127.0.0.1` 或 `localhost` 。（其实主要是http属于非安全域）下面的方法属于兼容了http的

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();
                });
            }
        }