问题描述 :

代码:

navigator.clipboard.writeText('http://go.defino.cn/public?uuid='+data.uuid).then(() => {layer.msg("复制成功");}).catch(() => {layer.msg("复制失败");})

测试环境下可以正常复制 ,但放到线上会报错:找不到 .writeText

百度分析:


在 Chrome 的 DevTools 控制台下执行navigator.clipboard返回undefined,经查找资料发现是浏览器禁用了非安全域的navigator.clipboard对象,哪些地址是安全的呢?

安全域包括本地访问与开启TLS安全认证的地址,如https协议的地址、127.0.0.1localhost

解决方案:

if (navigator.clipboard && window.isSecureContext) {navigator.clipboard.writeText('http://go.defino.cn/public?uuid='+data.uuid).then(() => {layer.msg("复制成功");}).catch(() => {layer.msg("复制失败");})}else {// 创建text areaconst textArea = document.createElement('textarea')textArea.value = 'http://go.defino.cn/public?uuid='+data.uuid// 使text area不在viewport,同时设置不可见document.body.appendChild(textArea)textArea.focus()textArea.select()return new Promise((resolve, reject) => {// 执行复制命令并移除文本框document.execCommand('copy') ? resolve() : reject(new Error('出错了'))textArea.remove()}).then(() => {layer.msg("复制成功");},() => {layer.msg("复制失败");})