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

最新推荐文章于 2024-05-10 22:26:42 发布
最新推荐文章于 2024-05-10 22:26:42 发布
阅读量1.2k 收藏 1
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68285431/article/details/134949128
版权

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

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

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

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

不用鼠标
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端js常用剪贴板(复制粘贴)操作和应用，以及navigator.clipboard新粘贴板API使用
codingWeb的博客
12-28 1万+
最近的项目上需要做复制粘贴相关的操作，来总结下吧 复制、剪切、粘贴事件： copy 发生复制操作时触发; cut 发生剪切操作时触发; paste 发生粘贴操作时触发; 每个事件都有一个 before 事件对应：beforecopy、beforecut、beforepaste; 这几个 before 一般不怎么用，所以我们把注意力放在三个事件就可以了。 触发条件: 鼠标右键菜单的复制、粘贴、剪切; 使用了相应的键盘组合键，比如:ctrl+c、ctrl+v; 复制操作： copy事件使用示例： &lt
clipboard.js在移动端复制失败的解决方法
12-01
解决这个问题的方法是使用clipboard.js提供的另一种实现方式，即通过JavaScript配置参数来指定要复制的内容。例如： ```javascript new ClipboardJS('.btn', { text: function(trigger) { return trigger....
【navigator.clipboard.writeText 在Safari上不能复制的问题，巨坑】
qq_42744571的博客
03-10 2621
【navigator.clipboard.writeText 在Safari上不能复制的问题，巨坑】
Clipboard-polyfill：在Web上简单复制，具有最大的浏览器兼容性
02-05
clipboard-polyfill 使在网络上复制变得容易： clipboard.writeText("hello world"); 该库是现代基于Promise的的polyfill。 注意：自2020年6月下旬起，您可以在所有主要浏览器的稳定版本中使用navigator.clipboard.writeText("hello world); （请参阅下文了解兼容性）。仅当您1）需要时，此库才对您有用复制text/html ，或2）需要定位较旧的浏览器。 用法 如果使用npm ，请安装： npm install clipboard-polyfill 将文本复制到剪贴板的示例应用程序：
在Iframe中调用navigator.clipboard.writeText报错Failed to execute ‘writeText‘ on ‘Clipboard‘: The Clipboard
BiuBiu_Ka
05-08 495
Feature Policy是一种安全机制，允许网站开发者控制哪些功能可以在自己的页面上以及嵌入的iframe中使用。这些策略可以限制潜在的不安全或敏感的功能，如剪贴板访问、摄像头、地理位置等。其原因是与浏览器的Feature Policy（特性策略）相关。
实现一键复制功能遇到的问题
qq_41938959的博客
05-06 1088
由于公司内部使用的是http协议，所以被浏览器禁用了，所以需要添加兼容性代码，在安全域下使用。至于文章中说的微信浏览器打开不生效我这边测试是没有问题的，可能是那端优化了吧。，但是打印navigator是存在的，并且本地打印是存在。在本地运行是可以实现的，但是放到线上会报这样的!安全域包括本地访问与开启TLS安全认证的地址，如。这样就实现啦，本地环境和正式环境都可以使用啦。的，经查询是浏览器禁用了非安全域的。写的，现在优化，添加了一键复制功能。提升效率，非安全域退回到。之前做了一个项目，是仿着。
navigator.clipboard Cannot read properties of undefined (reading ‘writeText‘）兼容性处理方案
fisher2022的博客
10-29 812
项目中大量使用了navigator.clipboard.writeText实现点击标签，可以复制指定内容至剪切板。域情况下，自定义navigator.clipboard的逻辑，将其改写为document.execCommand('copy')，然后全局引用该js代码。域下使用document.execCommand('copy')，同时不需要对源代码进行大量修改，实现兼容性处理。console.error('传统方式复制出错:', error);console.error('传统方式复制失败');
js 通过 navigator.clipboard.writeText(textToCopy) 实现复制，测试环境可以，正式环境不行的解决方案。
众纳百川的博客
12-09 9633
测试环境下可以正常复制 ，但放到线上会报错：找不到 .writeText。在 Chrome 的 DevTools 控制台下执行。layer.msg("复制成功");layer.msg("复制失败");安全域包括本地访问与开启TLS安全认证的地址，如。，经查找资料发现是浏览器禁用了非安全域的。对象，哪些地址是安全的呢？
navigator.clipboard.writeText()复制内容移动端失效问题解决
qq_39111074的博客
12-13 2862
navigator.clipboard.writeText()复制内容移动端失效问题解决
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...
clipboard复制文本或者隐藏域到剪切板,兼容ie.chrome.firefox
11-10
在IE中，它会回退到使用`document.execCommand('copy')`，而在现代浏览器中，则利用了`navigator.clipboard.writeText()` API。 1. **`clipboard.js`的基本用法**： 使用`clipboard.js`非常简单，你只需要在HTML中...
js文本复制与剪切插件clipboard.zip
11-24
这个插件的核心原理是利用了`navigator.clipboard`对象提供的`writeText()`和`readText()`方法。`writeText()`用于将指定的文本写入剪贴板，`readText()`则用于读取剪贴板上的文本。然而，由于安全和隐私考虑，这些...
15 个你永远需要的 Javascript 代码.pdf
03-24
3. **复制到剪贴板**：`copyToClipboard`函数使用`navigator.clipboard.writeText`，这是一个现代浏览器支持的功能，可以将文本内容直接复制到用户的剪贴板。 4. **找到一年中的一天**：`dayOfYear`函数计算从一年...
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 的
关于navigator.clipboard.writeText使用遇到的坑
weixin_45006814的博客
05-09 3771
【代码】关于navigator.clipboard.writeText使用遇到的坑。
navigator.clipboard失效问题
最新发布
qq_45743174的博客
05-10 723
在使用Chrome DevTools进行调试时，发现控制台执行返回undefined，影响了复制功能的开发和调试。
关于js复制内容到浏览器原生剪贴板报错：Cannot read properties of undefined (reading ‘writeText‘)的解决方案【已全平台解决】
XH_jing的博客
01-24 1540
根据使用浏览器提供的原生功能 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兼容性处理，控制台直接执行报错
Haines
02-07 2004
js复制方法navigator.clipboard兼容性处理，控制台直接执行报错
navigator.clipboard.writeText()用法
06-09
`navigator.clipboard.writeText()` 是一个 JavaScript API，用于将文本内容写入剪贴板。它接受一个字符串参数，该参数是要写入剪贴板的文本内容。使用该方法时，需要注意以下几点： 1. 该 API 需要在 HTTPS 网站上使用，因为它需要使用浏览器的安全剪贴板功能。 2. 该 API 可能不适用于所有浏览器，所以在使用时需要检查浏览器是否支持该 API。 3. 该 API 只能在用户授权的情况下才能使用。因此，在调用该方法之前，需要在用户与网站交互的过程中先获取用户的授权。 4. 该 API 在执行写入操作时是异步的，因此需要使用 Promise 来处理结果。 下面是一个示例代码： ``` if (navigator.clipboard) { navigator.clipboard.writeText('Hello, world!') .then(() => { console.log('写入剪贴板成功！'); }) .catch(err => { console.error('写入剪贴板失败：', err); }); } else { console.error('该浏览器不支持写入剪贴板！'); } ``` 在这个示例代码中，首先检查浏览器是否支持该 API，如果支持则尝试将字符串 'Hello, world!' 写入剪贴板中。如果写入成功，则在控制台输出成功信息；如果写入失败，则在控制台输出失败信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值