JavaScript实现页面点击复制到剪粘版并解决报错问题
作者：L.2017
这篇文章主要介绍了JavaScript实现页面点击复制到剪粘版并解决报错问题的相关资料,常见错误包括浏览器兼容性、权限拒绝、未加密域名,文中通过代码介绍的非常详细,需要的朋友可以参考下
发现问题
navigator.clipboard.writeText(text); 这段代码是用于将文本写入用户的剪贴板。如果在执行这段代码时出现错误，可能有以下几种原因：
浏览器不支持: 某些浏览器可能不支持此功能，或者需要在特定的安全上下文中（如HTTPS）使用。
用户拒绝权限: 在请求剪贴板访问权限时，用户可能拒绝了权限。
网站未经过HTTPS加密: 出于安全考虑，大多数现代浏览器要求网站通过HTTPS进行访问，以便允许剪贴板访问。
解决方法：
确保浏览器支持: 确认用户的浏览器支持
navigator.clipboardAPI。使用HTTPS: 确保网站通过HTTPS提供服务，以便允许使用剪贴板功能。
处理权限请求的拒绝: 如果用户拒绝了权限，可以引导用户手动开启，或者给出提示，解释为什么需要这个权限。
检查控制台错误: 查看开发者控制台是否有更详细的错误信息，根据具体的错误消息进行解决。
如果你遇到了这个错误，首先要确认你的网站是通过HTTPS提供服务的，然后检查用户是否授予了剪贴板访问权限。如果是开发阶段，可以考虑使用本地的HTTPS服务器或者使用一些开发者工具来绕过一些安全限制。如果是生产环境，则需要确保所有内容都通过HTTPS提供。
在 Chrome 的 DevTools 控制台下执行 navigator.clipboard 返回 undefined，经查找资料发现是浏览器禁用了非安全域的 navigator.clipboard 对象，哪些地址是安全的呢？
代码解决：
const copyText = (item) => {
console.log(item);
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard
.writeText(item)
.then(() => {
alert("复制成功");
})
.catch(() => {
alert("复制失败");
})
}else {
// 创建text area
const textArea = document.createElement('textarea')
textArea.value = item
// 使text area不在viewport，同时设置不可见
document.body.appendChild(textArea)
textArea.focus()
textArea.select()
return new Promise((resolve, reject) => {
// 执行复制命令并移除文本框
document.execCommand('copy') ? resolve() : reject(new Error('出错了'))
textArea.remove()
}).then(
() => {
alert("复制成功");
},
() => {
alert("复制失败");
})}
// navigator.clipboard.writeText(item.value).then(
// () => alert('复制成功'),
// () => alert('复制失败')
// );
};总结
到此这篇关于JavaScript实现页面点击复制到剪粘版并解决报错问题的文章就介绍到这了,更多相关JS页面点击复制到剪粘版内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！