javaScript 使用 navigator.clipboard.writeText(),报错的问题

最新推荐文章于 2025-07-09 12:00:00 发布
最新推荐文章于 2025-07-09 12:00:00 发布
阅读量3.2k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68285431/article/details/134949128
文章讲述了在框架开发中遇到的问题，即由于使用代理服务器导致无法访问navigator从而无法使用MDN中的copyAPI。作者提供了解决方案，即通过创建textarea来保存要复制的文本，从而绕过这个错误。

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

     首先先从mdn看到一个可以copy的API

      他的意思就是可以写入一个文本字符串到操作系统的剪切板，但是我们现在大多时候还是使用框架开发，开发避免不了使用代理服务器，这个时候就会出现一个问题，代理服务没有办法找到你的navigator，所以就会报错undefined；所以就需要另一种方法去解决这个问题，上代码：

主要的逻辑其实就是创建一个textarea进行保存你所copy的文字；

这样再使用你的代理就不会报错了

不用鼠标
关注
关于js复制内容到浏览器原生剪贴板报错：Cannot read properties of undefined (reading ‘writeText‘)的解决方案【已全平台解决】
XH_jing的博客
01-24 3106
根据使用浏览器提供的原生功能 navigator.clipboard 返回的 Clipboard 对象的方法 writeText() 写文本到剪贴板。 在本地开发，或者说是在使用http://127.0.0.1:8088 或者 http://localhost:8088 本地调试时，是没有问题的，但是如果使用绑定 host 或者使用不安全域（域名+http）时，使用此功能，就会发生下面的报错： Cannot read properties of undefined (reading 'writeText')
JS使用 navigator.clipboard 操作剪切板
★匆匆★的专栏
08-04 1170
3、如果出现失败的情况可以尝试在操作之前加上。
JS实现页面点击复制到剪粘版并解决报错问题
weixin_49588726的博客
11-20 1266
如果你遇到了这个错误，首先要确认你的网站是通过HTTPS提供服务的，然后检查用户是否授予了剪贴板访问权限。在 Chrome 的 DevTools 控制台下执行 navigator.clipboard 返回 undefined，经查找资料发现是浏览器禁用了非安全域的 navigator.clipboard 对象，哪些地址是安全的呢？: 出于安全考虑，大多数现代浏览器要求网站通过HTTPS进行访问，以便允许剪贴板访问。: 如果用户拒绝了权限，可以引导用户手动开启，或者给出提示，解释为什么需要这个权限。
navigator.clipboard
最新发布
liangshanbo1215的博客
07-09 1023
是浏览器提供的 Web API，用于安全地访问系统剪贴板。它替代了已废弃的方法，提供了更现代、更安全的剪贴板操作方式。
在Iframe中调用navigator.clipboard.writeText报错Failed to execute ‘writeText‘ on ‘Clipboard‘: The Clipboard
BiuBiu_Ka
05-08 2347
Feature Policy是一种安全机制，允许网站开发者控制哪些功能可以在自己的页面上以及嵌入的iframe中使用。这些策略可以限制潜在的不安全或敏感的功能，如剪贴板访问、摄像头、地理位置等。其原因是与浏览器的Feature Policy（特性策略）相关。
【navigator.clipboard.writeText 在Safari上不能复制的问题，巨坑】
qq_42744571的博客
03-10 4336
【navigator.clipboard.writeText 在Safari上不能复制的问题，巨坑】
在本地loscalhost运行navigator.clipboard.writeText是没问题的，但是使用本地电脑的ip地址访问运行的项目就会出现问题： Cannot read properties
AndrewPerfect的博客
08-16 1073
在本地（localhost）开发时，在localhost上可以正常工作，但当你通过本地计算机的 IP 地址访问项目时出现的问题，这是因为浏览器对 Clipboard API 的使用有严格的安全性要求。
js 复制内容到剪贴板，解决navigator.clipboard Cannot read properties of undefined (reading ‘writeText‘）
热门推荐
qq_58340302的博客
04-28 1万+
之前写过一个文章，是实现了点击按钮实现复制功能，链接在此：https://blog.csdn.net/qq_58340302/article/details/123847964?spm=1001.2014.3001.5502 这个实现方法在本地测试的时候点儿问题都没有，但是！ 但是将他拿到测试环境时，bug出现了，报错如下： 经查找资料发现是浏览器禁用了非安全域的navigator.clipboard对象。 安全域包括本地访问与开启TLS安全认证的地址，如https协议的地址、127.0...
vue的navigator.clipboard.writeText报错 Cannot read properties of undefined (reading 'writeText')
01-07
当在 Vue 应用程序中遇到 `navigator.clipboard.writeText` 报错提示 `Cannot read properties of undefined (reading 'writeText')` 时，这通常是因为浏览器环境不支持 Clipboard API 或者存在安全策略限制。...
通过navigator.clipboard.write做兼容浏览器剪贴操作
04-18 1701
Vue Js实现兼容浏览器的剪贴板功能
navigator.clipboard 读取剪贴板和写入剪贴板
weixin_46022934的博客
10-13 2723
系列文章目录 前言 一、介绍下navigator.clipboard（新Api） 二、使用方法如下（获取和读取） 1.读取剪贴板内容 API名称如下（promise类型）： 使用方法如下： 2.将文本写入剪贴板 API名称如下（promise类型）： 使用方法如下： 三、错误汇总 1.使用http会出现Api报错 错误如下图 解决方法如下图 报错原因 总结（猛男💪💪💪必看） 7条总结如下
如何解决在JavaScript中使用navigator.clipboard.writeText时遇到的错误？
12-05
在JavaScript中使用`navigator.clipboard.writeText`时，可能会遇到一些错误。以下是一些常见的问题及其解决方法： 1. **权限问题**： `navigator.clipboard.writeText`需要在安全上下文（HTTPS）中运行，并且用户...
navigator.clipboard.writeText()复制内容移动端失效问题解决
qq_39111074的博客
12-13 5413
navigator.clipboard.writeText()复制内容移动端失效问题解决
Javascript复制内容到剪贴板，解决navigator.clipboard Cannot read property ‘writeText‘ of undefined
拾级而上
08-27 1万+
起因 最近帮同事实现了一个小功能——复制文本到剪贴板，主要参考了前端大神阮一峰的博客，根据 navigator.clipboard 返回的 Clipboard 对象的方法 writeText() 写文本到剪贴板。在本地测试时一切正常，到了测试环境却提示： Uncaught (in promise) TypeError: Cannot read property 'writeText' of undefined at HTMLInputElement.<anonymous> 在 Chrome 的
js 通过 navigator.clipboard.writeText(textToCopy) 实现复制，测试环境可以，正式环境不行的解决方案。
众纳百川的博客
12-09 1万+
测试环境下可以正常复制 ，但放到线上会报错：找不到 .writeText。在 Chrome 的 DevTools 控制台下执行。layer.msg("复制成功");layer.msg("复制失败");安全域包括本地访问与开启TLS安全认证的地址，如。，经查找资料发现是浏览器禁用了非安全域的。对象，哪些地址是安全的呢？
navigator.clipboard失效问题
qq_45743174的博客
05-10 2665
在使用Chrome DevTools进行调试时，发现控制台执行返回undefined，影响了复制功能的开发和调试。
Google chrome浏览器调用navigator.clipboard.writeText不起作用
努力的习惯
11-27 360
chrome浏览器在localhost、https下navigator.clipboard.writeText才会起作用。
复制内容显示navigator.clipboard undefined的问题与解决
weixin_42190844的博客
04-30 5738
好久没写博客，太忙了。今天因为遇到复制文本的bug，在这里记录一下~
JS中navigator.clipborad在测试环境显示为undefined
qq_41964720的博客
05-23 798
项目需求：添加一个按钮实现一键复制的功能，开始使用的是navigator.clipborad在本地环境测试的没有问题，但是在测试环境中一键复制按钮点击没有反应，后面查找资料发现浏览器禁用了非安全域的。安全作用域下才能生效。在非安全作用域下使用。
js复制方法navigator.clipboard兼容性处理，控制台直接执行报错
Haines
02-07 2815
js复制方法navigator.clipboard兼容性处理，控制台直接执行报错
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值