JavaScript实现页面点击复制到剪粘版并解决报错问题

 更新时间:2025年06月03日 10:54:42   作者:L.2017  
这篇文章主要介绍了JavaScript实现页面点击复制到剪粘版并解决报错问题的相关资料,常见错误包括浏览器兼容性、权限拒绝、未加密域名,文中通过代码介绍的非常详细,需要的朋友可以参考下

发现问题

navigator.clipboard.writeText(text); 这段代码是用于将文本写入用户的剪贴板。如果在执行这段代码时出现错误,可能有以下几种原因:

  • 浏览器不支持: 某些浏览器可能不支持此功能,或者需要在特定的安全上下文中(如HTTPS)使用。

  • 用户拒绝权限: 在请求剪贴板访问权限时,用户可能拒绝了权限。

  • 网站未经过HTTPS加密: 出于安全考虑,大多数现代浏览器要求网站通过HTTPS进行访问,以便允许剪贴板访问。

解决方法:

  • 确保浏览器支持: 确认用户的浏览器支持 navigator.clipboard API。

  • 使用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页面点击复制到剪粘版内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • VsCode插件整理(小结)

    VsCode插件整理(小结)

    这篇文章主要介绍了VsCode插件整理(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • js如何取消事件冒泡

    js如何取消事件冒泡

    事件冒泡是什么意思这里就不为大家一一赘述了,下面为大家讲解的是js中如何取消事件冒泡,感兴趣的朋友可以参考下
    2013-09-09
  • 微信小程序实现横向滚动导航栏效果

    微信小程序实现横向滚动导航栏效果

    这篇文章主要介绍了微信小程序实现横向滚动导航栏效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • JavaScript数据存储 Cookie篇

    JavaScript数据存储 Cookie篇

    这篇文章主要为大家介绍了JavaScript数据存储 Cookie篇,感兴趣的朋友可以参考一下
    2016-07-07
  • JavaScript实现电商平台商品细节图

    JavaScript实现电商平台商品细节图

    这篇文章主要为大家详细介绍了JavaScript实现电商平台商品细节图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • JS onmousemove鼠标移动坐标接龙DIV效果实例

    JS onmousemove鼠标移动坐标接龙DIV效果实例

    这篇文章主要介绍了JS onmousemove鼠标移动坐标接龙DIV效果实例,有需要的朋友可以参考一下
    2013-12-12
  • JavaScript中forEach和map方法的使用与区别

    JavaScript中forEach和map方法的使用与区别

    众所周知map和forEach是数组的操作方法,下面这篇文章主要给大家介绍了关于JavaScript中forEach和map方法的使用与区别,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • 一文带你探索JavaScript中斜杠的神秘世界

    一文带你探索JavaScript中斜杠的神秘世界

    斜杠可以在代码中拥有多种含义,所以在 JavaScript 编程中,处理斜杠是一项非常重要的任务,本文就来带大家一起来看看JavaScript是如何处理斜杠的
    2023-06-06
  • javascript 发布-订阅模式 实例详解

    javascript 发布-订阅模式 实例详解

    这篇文章主要介绍了javascript 发布-订阅模式,结合实例形式详细分析了javascript发布-订阅模式基本功能、原理、实现方法与相关使用技巧,需要的朋友可以参考下
    2023-06-06
  • 用Fundebug插件记录网络请求异常的方法

    用Fundebug插件记录网络请求异常的方法

    这篇文章主要介绍了用Fundebug插件记录网络请求异常的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02

最新评论