当尝试在安卓的Chrome浏览器上使用navigator.clipboard.writeText()
复制一些文本时,只要我之后不显示警告框,它就能正常工作。一旦我显示了一个alert(),它就不再工作了。
例如,下面的代码按预期工作正常:
function myFunction() { var copyText = document.getElementById("myInput"); copyText.select(); copyText.setSelectionRange(0, 99999); navigator.clipboard.writeText(copyText.value); }
然而下面的代码不起作用,在控制台中不会抛出任何错误,并且在PC上的Chrome浏览器上正常工作,但在安卓上不行。
function myFunction() { var copyText = document.getElementById("myInput"); copyText.select(); copyText.setSelectionRange(0, 99999); navigator.clipboard.writeText(copyText.value); alert("成功复制了文本") }
有人知道发生了什么吗?谢谢。
原因
navigator.clipboard.writetext
不起作用的原因:兼容性问题:在废弃了
document.exec("copy")
方法后,此方法是后来添加的。在某些浏览器版本中,此方法将不起作用,您应该检查此方法是否可用。文档未聚焦:如果您在没有任何用户交互的情况下将内容写入剪贴板,浏览器将阻止您的请求,并在此方法的 Promise 中抛出错误。想象一下,用户想要复制一个您从互联网上加载的字符串(
ajax
)。如果此ajax
请求花费了一点时间,浏览器的焦点将会过期,我的经验是无法完成复制。未授权的权限:有时用户可能通过编辑其隐私和安全设置来阻止浏览器自动复制到剪贴板。在进行复制之前,请检查写入剪贴板的权限。但是,当页面处于活动选项卡时,
clipboard-write
权限会自动授予页面。异步问题:复制到剪贴板是一个异步操作,您应该等待您的代码完成工作。
HTTP 网站:此功能仅在安全上下文(HTTPS)中可用,在某些或所有支持的浏览器中。
Apple Safari 问题:苹果的 Clipboard API 大多数情况下期望一个
Promise
在写入剪贴板时。因此,我们可以使用ClipboardItem
将一个Promise
传递给write
方法。我建议您使用 write 而不是writeText
说话容易,展示给我代码:
用法:
重要提示:通过按钮和
onclick
事件进行测试,而不是在控制台中。因为
navigator.clipboard.writeText
方法返回一个Promise,而你的代码没有等待它的结果。如果你按照下面的代码进行修正,应该就没问题了:
有关
Promise
和navigator.clipboard.writeText
方法的更多信息,请访问以下链接:JavaScript.info上的Promise
MDN上与剪贴板交互