项目需求:添加一个按钮实现一键复制的功能,开始使用的是navigator.clipborad在本地环境测试的没有问题,但是在测试环境中一键复制按钮点击没有反应,后面查找资料发现浏览器禁用了非安全域的 navigator.clipboard
对象,只有在https
协议的地址、127.0.0.1
或 localhost,
安全作用域下才能生效。在非安全作用域下使用document.execCommand("copy")
代码如下:
// 一键复制
$('#copy').click(function (e) {
e.preventDefault()
let copyContent = "一键复制的内容"
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(copyContent).then(() => {
layer.msg('复制成功')
}).catch(err => {
layer.msg(err)
})
} else {
let textAreaDom = document.createElement('textarea')
textAreaDom.value = copyContent
Object.assign(textAreaDom.style, {
...textAreaDom.style,
position: 'absolute',
left: '-500px',
top: '-500px'
})
document.body.appendChild(textAreaDom)
textAreaDom.focus()
textAreaDom.select()
let result = document.execCommand('copy')
if (result) {
layer.msg('复制成功')
} else {
layer.msg('复制失败')
}
}
})