起因

最近帮同事实现了一个小功能——复制文本到剪贴板,主要参考了前端大神阮一峰的博客,根据 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.1localhost

所以本文就是作一个兼容写法,在安全域下使用 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的更多相关文章

  1. JavaScript复制内容到剪贴板

    移动端 需要复制内容到剪贴板时, clipborad.js 不支持ios微信版浏览器,可配合使用 execCommand 使其兼容, 完成一键复制淘口令的功能. 注意使用clipborad.js时,i ...

  2. JavaScript复制内容到剪贴板 clipboard.js

    参考链接: https://github.com/axuebin/articles/issues/26#issuecomment-466337929

  3. JavaScript 复制内容到剪贴板

    <html> <head> <title>Selector</title> <script language="javascript&q ...

  4. 使用clipboard.js实现复制内容至剪贴板

    下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...

  5. JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

  6. JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】

    正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...

  7. 《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》

    前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...

  8. Zclip点击复制内容到剪贴板兼容各浏览器

    WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...

  9. javascript复制内容到剪切板/网页上的复制按钮的实现

    javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...

随机推荐

  1. 洛谷3973 TJOI2015线性代数(最小割+思维)

    感觉要做出来这个题,需要一定的线代芝士 首先,我们来观察这个柿子. 我们将\(B\)的权值看作是收益的话,\(C\)的权值就是花费. 根据矩阵乘法的原理,只有当\(a[i]和a[j]\)都为\(1\) ...

  2. SpringBoot入门05-全局配置文件

    springboot全局配置文件作用是设置或修改默认设置 springboot全局配置文件有下面两种方式 application.xml配置文件 示例 server.port=8088 server. ...

  3. C++/CLR 使用(VS2012,VS2013,VS2015)编写

    转载自:http://www.th7.cn/system/win/201509/129417.shtml VS2010以及以前的版本,创建项目时都可以在CLR下找到"Windows窗体应用程 ...

  4. 【UE4】读写 Texture 数据

    创建texture 方式一 void AActor_Assignment2::TextureFromImage_Internal( const TArray<FColor>& Sr ...

  5. VS Code Remote SSH设置

    本文翻译自:5 Steps: Setup VS Code for Remote Development via SSH from Windows to Linux system 5个步骤:设置VS代码 ...

  6. Java继承中父类和子类构造函数的问题

    父类有无参构造函数时(显示或隐式),子类的有参和无参构造函数都是默认调用父类的无参构造函数:当父类只有有参构造函数时,子类可以有有参和无参构造函数,子类有参构造函数必须显式调用父类的有参构造函数,子类 ...

  7. Scrum Meeting 0605

    零.说明 日期:2021-6-5 任务:简要汇报两日内已完成任务,计划后两日完成任务 一.进度情况 组员 负责 两日内已完成的任务 后两日计划完成的任务 困难 qsy PM&前端 暂无 重新设 ...

  8. Vue el 使用el-checkbox-group复选框进行单选框操作

    el-checkbox-group这个组件与其他复选框不一样,我当初也是半天不知道怎么操作 页面使用v-model绑定 size就是等比例缩小放大,v-ror循环应该看的懂.重要的是@chage到我们 ...

  9. 乘风破浪,遇见上一代操作系统Windows 10 - 抢鲜尝试安装新微软商店(Microsoft Store)

    背景 在微软官方文章的<十一项关于微软商店新知>中提到: 新的微软商店现在可在Windows 11上找到,我们很高兴地分享,它将在未来几个月内提供给Windows 10客户!我们将很快分享 ...

  10. 简明教程 | Docker篇 · 其二:Dockerfile的编写

    Dockerfile是什么 一个包含用于组合 image 的命令的文本文件,docker 通过 dockerfile 和构建环境的上下文来构建 image . 编写Dockerfile FROM 首先 ...