Javascript复制内容到剪贴板,解决navigator.clipboard Cannot read property 'writeText' of undefined
起因
最近帮同事实现了一个小功能——复制文本到剪贴板,主要参考了前端大神阮一峰的博客,根据 navigator.clipboard
返回的 Clipboard 对象的方法 writeText()
写文本到剪贴板。在本地测试时一切正常,到了测试环境却提示:
Uncaught (in promise) TypeError: Cannot read property 'writeText' of undefined
at HTMLInputElement.<anonymous>
在 Chrome 的 DevTools 控制台下执行 navigator.clipboard
返回 undefined
,经查找资料发现是浏览器禁用了非安全域的 navigator.clipboard
对象,哪些地址是安全的呢?
安全域包括本地访问与开启TLS安全认证的地址,如 https
协议的地址、127.0.0.1
或 localhost
。
所以本文就是作一个兼容写法,在安全域下使用 navigator.clipboard
提升效率,非安全域退回到 document.execCommand('copy');
保证功能可用。
脚本内容
function copyToClipboard(textToCopy) {
// navigator clipboard 需要https等安全上下文
if (navigator.clipboard && window.isSecureContext) {
// navigator clipboard 向剪贴板写文本
return navigator.clipboard.writeText(textToCopy);
} else {
// 创建text area
let textArea = document.createElement("textarea");
textArea.value = textToCopy;
// 使text area不在viewport,同时设置不可见
textArea.style.position = "absolute";
textArea.style.opacity = 0;
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
return new Promise((res, rej) => {
// 执行复制命令并移除文本框
document.execCommand('copy') ? res() : rej();
textArea.remove();
});
}
}
Javascript复制内容到剪贴板,解决navigator.clipboard Cannot read property 'writeText' of undefined的更多相关文章
- JavaScript复制内容到剪贴板
移动端 需要复制内容到剪贴板时, clipborad.js 不支持ios微信版浏览器,可配合使用 execCommand 使其兼容, 完成一键复制淘口令的功能. 注意使用clipborad.js时,i ...
- JavaScript复制内容到剪贴板 clipboard.js
参考链接: https://github.com/axuebin/articles/issues/26#issuecomment-466337929
- JavaScript 复制内容到剪贴板
<html> <head> <title>Selector</title> <script language="javascript&q ...
- 使用clipboard.js实现复制内容至剪贴板
下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...
- JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)
现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...
- JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】
正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...
- 《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》
前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...
- Zclip点击复制内容到剪贴板兼容各浏览器
WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...
- javascript复制内容到剪切板/网页上的复制按钮的实现
javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...
随机推荐
- 日常学习用到的Git指令
Git 常用Git指令 (本地) git init - 将文件夹初始化为Git仓库 git add - 将工作区的指定文件放入暂存区 git status - 查看工作区和暂存区的状态 git com ...
- 从零入门 Serverless | Serverless Kubernetes 应用部署及扩缩容
作者 | 邓青琳(轻零) 阿里云技术专家 导读:本文分为三个部分,首先给大家演示 Serverless Kubernetes 集群的创建和业务应用的部署,其次介绍 Serverless Kuberne ...
- 下载cnki硕博士论文的pdf版
每找到一篇心仪的硕博士论文时,总是迫不及待下载到本地吧. 可是接下来你只能选择caj格式. caj界面都用过吧,没用过,你也不会来这. 我就想看pdf版本的,怎么办呢?有办法! 重点来了,敲黑板: 1 ...
- WinForm 控件 DataGridView 常用操作
1.取消列自动生成 在窗体load事件里面设置表格dataGridView的AutoGenerateColumns为 false dataGridView.AutoGenerateColumns = ...
- 题解 「CTSC2018暴力写挂」
题目传送门 题目大意 给出两个大小为 \(n\) 的树,求出: \[\max\{\text{depth}(x)+\text{depth}(y)-\text{depth}(\text{LCA}(x,y) ...
- Go语言核心36讲(Go语言基础知识六)--学习笔记
06 | 程序实体的那些事儿 (下) 在上一篇文章,我们一直都在围绕着可重名变量,也就是不同代码块中的重名变量,进行了讨论.还记得吗? 最后我强调,如果可重名变量的类型不同,那么就需要引起我们的特别关 ...
- 使用tinypng对需要上传Gitee图床的图片进行压缩
目录 背景 Tinypng简介 Tinypng使用 手动上传图片 使用API 调用API自动上传超过1MB图片 安装tinyfy 自动上传脚本 其他 背景 在使用Gitee作为图床时(使用Typora ...
- kettle使用
Kettle的安装及简单使用 目录 Kettle的安装及简单使用 一.kettle概述 二.kettle安装部署和使用 Windows下安装 案例1:MySQL to MySQL 案例2:使用作业执行 ...
- 【UE4 C++ 基础知识】<8> Delegate 委托
概念 定义 UE4中的delegate(委托)常用于解耦不同对象之间的关联:委托的触发者不与监听者有直接关联,两者通过委托对象间接地建立联系. 监听者通过将响应函数绑定到委托上,使得委托触发时立即收到 ...
- 【UE4 C++】绘制函数 Debug drawing functions
基于UKismetSystemLibrary /** Draw a debug line */ UFUNCTION(BlueprintCallable, Category="Renderin ...