Chrome 导航器.剪贴板未定义

csga3l58  于 2022-12-06  发布在  Go
关注(0)|答案(7)|浏览(214)

为什么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.
我敢肯定这在某个时候是有效的,但现在已经不起作用了。这很令人困惑,因为这个表表明Clipboard API是在Chrome中实现的(已经有一段时间了),但这个特定API方法的表表明没有一个API方法是受支持的??

7lrncoxx

7lrncoxx1#

这需要一个安全的来源-HTTPS或localhost(或者通过运行Chrome并设置一个标志来禁用)。就像ServiceWorker一样,这种状态由navigator对象上属性的存在与否来指示。
https://developers.google.com/web/updates/2018/03/clipboardapi
这在接口上的[SecureContext]规范中注明:https://w3c.github.io/clipboard-apis/#dom-navigator-clipboard
您可以检查window.isSecureContext的状态,以了解这是否是功能不可用的原因。Secure contexts | MDN
是的,您应该设置HSTS以确保HTTP重定向到HTTPS。

bnlyeluc

bnlyeluc2#

您可以编写一个一体化 Package 函数。

  • 如果在安全上下文(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'));

ps:不要在jsfiddle/copeden/这样的repl中尝试它。

nvbavucw

nvbavucw3#

试试这个:

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);
});
twh00eeo

twh00eeo4#

当HTTPS尚不可用且使用document.execCommand('copy ')的解决方案不起作用时,用于复制工具提示的最小解决方案。但它要求用户手动选择并复制警报中显示的内容。

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

ttcibm8c5#

在localhost中,chrome浏览器阻止了剪贴板。
Chrome〉设置〉隐私和安全〉网站设置〉查看权限和跨网站存储的数据,然后单击您的本地主机URL,这将在页面上显示,并检查剪贴板的权限

jhdbpxl9

jhdbpxl96#

这个解决方案目前有效(它包括跨浏览器支持,错误处理+清理)。
https://stackoverflow.com/a/33928558/318380

yqhsw0fo

yqhsw0fo7#

您可以用途:
更改:
剪贴板.writeText(“内容”)
改为:navigator['clipboard'].writeText(“内容”)。

相关问题