剪贴板未定义

为什么 navigator.clipboard总是出现在下面的代码片段中？

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 方法是受支持的？

120575 次浏览
小开
最佳答案

这需要一个安全的来源ーー HTTPS 或 localhost (或者通过运行带有标志的 Chrome 来禁用)。与 ServiceWorker 一样，此状态由导航器对象上的属性的存在或不存在来指示。

Https://developers.google.com/web/updates/2018/03/clipboardapi

这在规范中用接口 https://w3c.github.io/clipboard-apis/#dom-navigator-clipboard上的[ SecureContext ]说明

您可以检查 window.isSecureContext的状态来了解这是否是某个特性不可用的原因

是的，您应该设置 HSTS以确保 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
  • 如果没有: 使用“出视口隐藏文本区”的技巧
// return a promise
function copyToClipboard(textToCopy) {
// navigator clipboard api needs a secure context (https)
if (navigator.clipboard && window.isSecureContext) {
// navigator clipboard api method'
return navigator.clipboard.writeText(textToCopy);
} else {
// text area method
let textArea = document.createElement("textarea");
textArea.value = textToCopy;
// make the textarea out of viewport
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
return new Promise((res, rej) => {
// here the magic happens
document.execCommand('copy') ? res() : rej();
textArea.remove();
});
}
}

用途:

copyToClipboard("I'm going to the clipboard !")
.then(() => console.log('text copied !'))
.catch(() => console.log('error'));

注意: 不要在像 jsfiddle/copeden/这样的回复中尝试它..。

小开

这个解决方案目前是有效的(包括跨浏览器支持、错误处理 + 清除)。

Https://stackoverflow.com/a/33928558/318380

小开

当 HTTPS 还不可用并且具有 document.ExecCommand (‘ copy’)的解决方案不能工作时，复制工具提示的最小解决方案。 但是它要求用户手动选择和复制警报中显示的内容。

function copyToClipboard(text) {
if(navigator.clipboard) {
navigator.clipboard.writeText(text);
}
else{
alert(text);
}
}
小开

在 localhost 中，剪贴板被 chrome 浏览器阻塞

Chrome > 设置 > 隐私和安全 > 网站设置 > 查看跨网站存储的权限和数据，然后点击你的本地主机 URL，它会在页面上显示并检查剪贴板的权限

小开

你可使用:

更改:

WriteText (“ Content”)

致: 导航器[‘ clipboard’] . writeText (“ Content”)。


提交答案