目录
- 【1】实现复制文本功能【部分浏览器不支持】
-
- [现场环境浏览器 "复制失败" 报错](#现场环境浏览器 “复制失败” 报错)
- 【2】兼容
【1】实现复制文本功能【部分浏览器不支持】
以下代码实现文本赋值功能我本地浏览器成功了,但是现场环境浏览器 "复制失败",
- 我本地浏览器版本:
128.0.6613.115
- 现场环境浏览器版本:
86.0.4240.111
js
async mikeOpen() {
// window.open('chrome://flags/#unsafely-treat-insecure-origin-as-secure')
// location.href = 'chrome://flags/#unsafely-treat-insecure-origin-as-secure'
try {
await navigator.clipboard.writeText(
'chrome://flags/#unsafely-treat-insecure-origin-as-secure'
)
this.$message('谷歌浏览器访问已复制地址添加平台网址信息开启麦克风权限111')
} catch (err) {
console.log('err----111', err)
this.$message('复制失败111')
}
},
现场环境浏览器 "复制失败" 报错
【2】兼容
【1】的问题可能是现场浏览器不支持
navigator.clipboard.writeText()
,可以使用document.execCommand('copy')
,但是好像有的浏览器不支持document.execCommand('copy')
所以添加了判断,如果浏览器支持document.execCommand('copy')
则使用document.execCommand('copy')
进行复制;如果浏览器支持
navigator.clipboard.writeText
则使用navigator.clipboard.writeText
修改复制方式
js
async mikeOpen() {
// window.open('chrome://flags/#unsafely-treat-insecure-origin-as-secure')
// location.href = 'chrome://flags/#unsafely-treat-insecure-origin-as-secure'
this.copyToClipboard('chrome://flags/#unsafely-treat-insecure-origin-as-secure')
.then(() => {
this.$message('谷歌浏览器访问已复制地址添加平台网址信息开启麦克风权限222')
})
.catch((err) => {
console.log('err----2222', err)
this.$message('复制失败222')
})
},
copyToClipboard(textToCopy) {
if (document.execCommand('copy')) {
// 创建textarea
var textArea = document.createElement('textarea')
textArea.value = textToCopy
// 使textarea不在viewport,同时设置不可见
textArea.style.position = 'fixed'
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()
})
} else if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
// navigator clipboard 向剪贴板写文本
return navigator.clipboard.writeText(textToCopy)
}
},