js 通过 navigator.clipboard.writeText(textToCopy) 实现复制，测试环境可以，正式环境不行的解决方案。-Toy模板网

这篇具有很好参考价值的文章主要介绍了js 通过 navigator.clipboard.writeText(textToCopy) 实现复制，测试环境可以，正式环境不行的解决方案。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题描述：

代码：
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.1 或 localhost 。

解决方案：文章来源地址https://www.toymoban.com/news/detail-542920.html

if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard
                        .writeText('http://go.defino.cn/public?uuid='+data.uuid)
                        .then(() => {
                            layer.msg("复制成功");
                        })
                        .catch(() => {
                            layer.msg("复制失败");
                        })
                }else {
                    // 创建text area
                    const 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("复制失败");
                        }
                    )

到了这里，关于js 通过 navigator.clipboard.writeText(textToCopy) 实现复制，测试环境可以，正式环境不行的解决方案。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！