在Iframe中调用navigator.clipboard.writeText报错Failed to execute ‘writeText‘ on ‘Clipboard‘: The Clipboard

最新推荐文章于 2025-03-25 22:09:45 发布
最新推荐文章于 2025-03-25 22:09:45 发布
阅读量1.9k 收藏 2
点赞数 3
文章标签： javascript 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55195734/article/details/138560315
版权

在Iframe中调用navigator.clipboard.writeText报错Failed to execute 'writeText' on 'Clipboard': The Clipboard

其原因是与浏览器的Feature Policy（特性策略）相关。

Feature Policy是一种安全机制，允许网站开发者控制哪些功能可以在自己的页面上以及嵌入的iframe中使用。这些策略可以限制潜在的不安全或敏感的功能，如剪贴板访问、摄像头、地理位置等。

解决方法
在ifram标签中中添加allow="clipboard-write"

<iframe  :src="`${url}/#/manual?type=edit&`" allow="clipboard-write"></iframe>
BiuBiu__A
关注
navigator.clipboard 读取剪贴板和写入剪贴板
weixin_46022934的博客
10-13 2591
系列文章目录 前言 一、介绍下navigator.clipboard（新Api） 二、使用方法如下（获取和读取） 1.读取剪贴板内容 API名称如下（promise类型）： 使用方法如下： 2.将文本写入剪贴板 API名称如下（promise类型）： 使用方法如下： 三、错误汇总 1.使用http会出现Api报错 错误如下图 解决方法如下图 报错原因 总结（猛男💪💪💪必看） 7条总结如下
WebKitX ActiveX 6.0.0.15802 Crack
控件与插件之大全
07-18 1498
WebKitX ActiveXwraps Chromium Embedded Framework (CEF3) into an out-of-process ActiveX component for use with OLE/COM languages. Chromium Embedded Framework encapsulates WebKit Blink HTML5 Renderer and Google V8 JavaScript Engine
javaScript 使用 navigator.clipboard.writeText(),报错的问题
m0_68285431的博客
12-12 3059
他的意思就是可以写入一个文本字符串到操作系统的剪切板，但是我们现在大多时候还是使用框架开发，开发避免不了使用代理服务器，这个时候就会出现一个问题，代理服务没有办法找到你的navigator，所以就会报错undefined；主要的逻辑其实就是创建一个textarea进行保存你所copy的文字；首先先从mdn看到一个可以copy的API。这样再使用你的代理就不会报错了。
线上点击复制功能报错：TypeError: Cannot read properties of undefined (reading ‘writeText‘)
m0_74141658的博客
03-25 346
原因是线上系统没有HTTPS协议服务。
【navigator.clipboard.writeText 在Safari上不能复制的问题，巨坑】
qq_42744571的博客
03-10 4081
【navigator.clipboard.writeText 在Safari上不能复制的问题，巨坑】
navigator.clipboard.writeText()复制内容移动端失效问题解决
qq_39111074的博客
12-13 5136
navigator.clipboard.writeText()复制内容移动端失效问题解决
navigator.clipboard失效问题
qq_45743174的博客
05-10 2468
在使用Chrome DevTools进行调试时，发现控制台执行返回undefined，影响了复制功能的开发和调试。
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...
selection-to-clipboard-crx插件
04-06
提取后的文本随后通过WebExtension API的消息传递机制发送回插件背景脚本，背景脚本再将其存储到剪贴板中，通常使用`navigator.clipboard.writeText`方法完成这个操作。 值得注意的是，插件的CRX文件（如`selection...
vue运行cmd命令
最新发布
05-07
好的，我现在需要解决用户的问题：在Vue.js中通过代码运行CMD命令并获取输出结果。...navigator.clipboard.writeText('echo hello').then(() => { console.log('Command copied to clipboard'); }); ```
破解VSCode：专业开发者揭秘高效参数传递的10大秘诀
本章将为大家提供一个关于Visual Studio Code (VSCode) 高效参数传递的概览，旨在阐明参数传递在编辑器中的重要性，以及它如何成为现代开发工作流的关键组成部分。 ## 1.1 参数传递在现代开发中的作用 参数传递是...
创建一个可以复制百度文库的Chrome插件
m0_47202518的博客
02-26 2277
具体如何编写Chrome扩展，可以查看Google提供的API文档。本次我打算编写一个简易版本，右键提供一个上下文菜单，复制文本。一些文本屏蔽的内容较少，也有方法查看。如下图所示。 准备图标 新建文件夹CopyText，这将是我们的插件目录。 前往iconfont选择一个合适的图标，尺寸准备16，32，48，64，128 想要获得代码提示，需要在WebStorm中导入库。 点击download，找到chrome 现在，你就可以获得代码提示功能。 编写清单文件(manifest.json) {
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复制内容到浏览器原生剪贴板报错：Cannot read properties of undefined (reading ‘writeText‘)的解决方案【已全平台解决】
XH_jing的博客
01-24 2845
根据使用浏览器提供的原生功能 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.writeText(textToCopy) 实现复制，测试环境可以，正式环境不行的解决方案。
众纳百川的博客
12-09 1万+
测试环境下可以正常复制 ，但放到线上会报错：找不到 .writeText。在 Chrome 的 DevTools 控制台下执行。layer.msg("复制成功");layer.msg("复制失败");安全域包括本地访问与开启TLS安全认证的地址，如。，经查找资料发现是浏览器禁用了非安全域的。对象，哪些地址是安全的呢？
js复制方法navigator.clipboard兼容性处理，控制台直接执行报错
Haines
02-07 2602
js复制方法navigator.clipboard兼容性处理，控制台直接执行报错
复制内容显示navigator.clipboard undefined的问题与解决
weixin_42190844的博客
04-30 5277
好久没写博客，太忙了。今天因为遇到复制文本的bug，在这里记录一下~
解决 iframe 中不能使用 Clipboard API 的问题
wruli的博客
01-24 1860
navigator.clipboard
navigator.clipboard Cannot read properties of undefined (reading ‘writeText‘）兼容性处理方案
fisher2022的博客
10-29 1322
项目中大量使用了navigator.clipboard.writeText实现点击标签，可以复制指定内容至剪切板。域情况下，自定义navigator.clipboard的逻辑，将其改写为document.execCommand('copy')，然后全局引用该js代码。域下使用document.execCommand('copy')，同时不需要对源代码进行大量修改，实现兼容性处理。console.error('传统方式复制出错:', error);console.error('传统方式复制失败');
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值