Google chrome navigator.clipboard未定义

为什么

navigator.clipboard

在下面的代码段中总是

undefined

var clipboard = navigator.clipboard;
if (clipboard == undefined) {
    console.log('clipboard is undefined');
} else {
    clipboard.writeText('stuff to write').then(function() {
        console.log('Copied to clipboard successfully!');
    }, function() {
        console.error('Unable to write to clipboard. :-(');
    });
}

可以找到有关剪贴板API的更多信息

Chrome版本：68.0.3440.106

---

我相信这在某种程度上是有效的，但现在不再有效了。令人困惑的是，这表明剪贴板API是在Chrome中实现的（已经有一段时间了），但特定的API方法表明API中的任何方法都不受支持？？？

这需要一个安全的来源—HTTPS或localhost（或通过运行带有标志的Chrome来禁用）。与ServiceWorker一样，此状态由navigator对象上是否存在属性来指示

这在接口上带有[SecureContext]的规范中有所说明：

您可以检查

window.issecurencontext

的状态，了解这是否是功能不可用的原因

是的，您应该设置以确保HTTP重定向到HTTPS。

尝试以下操作：

if (typeof(navigator.clipboard)=='undefined') {
    console.log('navigator.clipboard');
    var textArea = document.createElement("textarea");
    textArea.value = linkToGo;
    textArea.style.position="fixed";  //avoid scrolling to bottom
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();

    try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        toastr.info(msg); 
    } catch (err) {
        toastr.warning('Was not possible to copy te text: ', err);
    }

    document.body.removeChild(textArea)            
    return;
}
navigator.clipboard.writeText(linkToGo).then(function() {
    toastr.info(`successful!`);         
}, function(err) {
    toastr.warning('unsuccessful!', err);
});

---

您可以编写一个多功能包装器函数

• 如果在安全上下文（https）中：使用导航器剪贴板api
• 如果不是：使用“视口外隐藏文本区域”技巧

//返回承诺
功能copyToClipboard（文本复制）{
//导航器剪贴板api需要安全上下文（https）
if（navigator.clipboard&&window.issecurencontext）{
//导航器剪贴板api方法'
返回navigator.clipboard.writeText（textToCopy）；
}否则{
//文本区域法
设textArea=document.createElement（“textArea”）；
textArea.value=textToCopy；
//使文本区域脱离视口
textArea.style.position=“固定”；
textArea.style.left=“-999999 px”；
textArea.style.top=“-999999 px”；
document.body.appendChild（textArea）；
textArea.focus（）；
textArea.select（）；
返回新承诺（（res，rej）=>{
//奇迹就在这里发生了
document.execCommand（'copy'）？res（）：rej（）；
textArea.remove（）；
});
}
}

使用：

copyToClipboard（“我要去剪贴板！”）
。然后（（）=>console.log（'text copied！'））
.catch（（）=>console.log（'error'）；

---

ps：不要在jsfiddle/copeden/…

这样的repl中尝试它，页面是否来自安全来源？aaaah@JoshLee。。。。这就不同了。。。来源是安全的（可通过https访问），但出于某种原因，我是通过http访问它。。。当我通过https访问时，

剪贴板

对象可用！这就解释了为什么我确信它以前是有效的。也许我应该将所有http转发到https。谢谢如果你提交一个答案，我会把它标记为正确的。我有同样的问题，但这里给出的解决方案不起作用。直到我发现文本区域或文本字段可能未被禁用！！顺便说一句，临时禁用https检查的标志是--unsafely treat unsecure origin as secure=.In

chrome://flags

，启用被视为安全的

不安全源代码，并为其提供所需的源代码。这完全可行，但代码需要一些重构。这很有效。谢谢。很酷，有点简洁：
textArea.style.position=“绝对”；textArea.style.opacity=0我认为焦点调用是不必要的