在Chrome中http的网站，对navigator的限制

背景

在Chrome中http的网站，会没有navigator.clipboard

问题

在Chrome浏览器中，对于HTTP网站的访问确实存在一些限制，但这些限制并不直接导致navigator.clipboard API的缺失。然而，需要注意的是，Chrome浏览器确实对navigator.clipboard API的使用设置了一些条件，这些条件与网站的协议类型（HTTP或HTTPS）以及用户交互有关。

首先，Chrome浏览器规定，只有HTTPS协议的页面才能使用navigator.clipboard API。这是因为HTTPS提供了更高的安全性，可以保护用户的数据不被窃取或篡改。因此，如果网站使用的是HTTP协议，那么它将无法使用navigator.clipboard API来访问剪贴板。

其次，即使网站使用的是HTTPS协议，navigator.clipboard API的使用也需要用户的明确许可。这是因为剪贴板包含了用户的敏感信息，如文本、图像等，如果允许网站随意访问这些信息，可能会泄露用户的隐私。因此，Chrome浏览器要求网站在尝试访问剪贴板时，必须获得用户的明确许可。

综上所述，虽然Chrome浏览器对HTTP网站有限制，但这并不直接导致navigator.clipboard API的缺失。然而，由于HTTPS协议的要求和用户许可的限制，许多HTTP网站可能无法使用navigator.clipboard API。如果网站需要使用这个API，那么它应该考虑升级到HTTPS协议，并确保在尝试访问剪贴板时获得用户的明确许可。

请注意，以上信息可能会随着Chrome浏览器的更新而发生变化。因此，建议开发者在开发过程中始终关注Chrome浏览器的最新文档和更新日志，以确保他们的网站能够正确地使用navigator.clipboard API。

解决方案

// 复制
function handleCopyClick(text) {
	if (navigator.clipboard) {
            navigator.clipboard.writeText(text).then(() => {
                    ms.success('复制成功!');
            }).catch(err => {
                    ms.error('复制失败!');
            });
	} else {
            const textarea = document.createElement('textarea');
            textarea.style.opacity = 0;
            textarea.setAttribute('readonly', 'readonly')
            textarea.value = text;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            ms.success('复制成功!');
	}
}