关于javascript:JavaScript复制内容到剪贴板

42次阅读

共计 1859 个字符，预计需要花费 5 分钟才能阅读完成。

最近有个小需要，点击页面上的复制链接按钮，把以后页面的地址复制到剪贴板，不便粘贴到其余中央分享。

当然有了，比方 clipboardjs，体积小，而且能够灵便的引入到我的项目中。

不过，如果你和我一样对这个性能的实现很好奇，能够接着向下看，其实也很简略。

如果在百度中这样搜寻，失去的答案大部分都是教你应用上面这个办法：

document.execCommand('copy')

不过如果去查阅一下比拟权威的文档如 MDN、Stack Overflow，就会发现下面的办法曾经被废除了，曾经不举荐应用，因为不能确定哪一天就真的用不了了。

所以应该找一种稳当的形式实现这个性能，Stack Overflow 上有这样一个答复集体认为比拟不错，贴下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<button onclick="copyTextToClipboard(window.location.href)"> 复制链接 </button>
<script>

    function fallbackCopyTextToClipboard() {
        // 1. 创立一个可选中元素
        let textArea = document.createElement("textarea");
        textArea.value = window.location.href;
        // 2. 应用定位，阻止页面滚动
        textArea.style.top = "0";
        textArea.style.left = "0";
        textArea.style.position = "fixed";
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        try {var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Fallback: Copying text command was' + msg);
        } catch (err) {console.error('Fallback: Oops, unable to copy', err);
        }
        // 3. 移除元素
        document.body.removeChild(textArea);
    }

    function copyTextToClipboard(text) {if (!navigator.clipboard) {fallbackCopyTextToClipboard(text);
            return;
        }
        navigator.clipboard.writeText(text).then(function() {console.log('Async: Copying to clipboard was successful!');
        }, function(err) {console.error('Async: Could not copy text:', err);
        });
    }
</script>
</body>
</html>

咱们能够把下面的办法称为 Async + Fallback（即优先应用 navigator.clipboard，如果这种比拟新的形式没有被你的浏览器反对，就应用 document.execCommand 这个行将被废除的形式）

实质上 document.execCommand 是在你的页面中创立了一个没有用的 DOM 元素，如 textArea、input，它们的特点是内容能够被选中，而后被 document.execCommand 操纵，进而复制内容到剪贴板。这种形式看起来并不优雅，所以咱们优先举荐 navigator.clipboard.writeText(text).then()。如果用户的浏览器还没有反对 navigator.clipboard，再将 document.execCommand 作为候选，这样兼容性比拟好。

文章首发于 IICOOM- 集体博客《JavaScript 复制内容到剪贴板》

正文完