在Ajax调用成功后复制到剪贴板，可在Chrome中使用，但在Firefox中无法使用

Question

单击按钮后，我需要从服务器获取密码，我使它可以在Chrome中工作，但由于某些原因，它不能在Firefox中工作。 我已经使其与async: false但这不是一个好习惯。 这是我的代码：

纽扣

<button class="btn" onClick="copyPassword(el1)">Ip address</button>'

脚本

function copyPassword(el1) {
    var id = el1;
    $.ajax({
        type: 'GET',
        url: 'copypassword',
        data: {
            "_token": "{{ csrf_token() }}",
            "id": id
        },
        success: function(msg) {
            copyToClipboard(msg);
        }
    });
}

function copyToClipboard(text) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(text).select();
    document.execCommand("copy");
    $temp.remove();
}

这在Chrome中可以正常工作而没有任何警告，但是在Firefox中我得到了这个document.execCommand('cut'/'copy') was denied because it was not called from inside a short running user-generated event handler.

有什么办法可以使它在Firefox中像这样工作吗？

Answer 1

跨浏览器的功能不同。 这在JS / CSS / HTML中很常见。

从MDN：

浏览器特定的注意事项

部分此处涉及的剪贴板和其他API迅速发展，因此浏览器的工作方式也有所不同。

在Chrome中：

您可以在所有执行上下文（背景页面，内容脚本，选项页面和弹出窗口）中这样写入剪贴板。 您实际上不需要“ clipboardWrite”，甚至不需要在用户生成的事件处理程序之外写入剪贴板。

在Firefox中：

您可以在所有执行上下文（背景页面除外）中使用execCommand写入剪贴板。 在Firefox中，您无法在后台页面中选择文本或将输入字段放在焦点上，因此您无法使用execCommand从后台页面写入剪贴板。 剪贴板Web API没有此限制。 仅从版本51开始才支持“ clipboardWrite”权限。 从版本57开始，您可以使用Clipboard.setImageData（）API将图像复制到剪贴板。 Firefox 63中添加了对剪贴板API的navigator.clipboard.writeText（）方法的支持。使用内容脚本时，剪贴板API仅适用于HTTPS页面。 解决方法是，在内容脚本和后台脚本之间使用消息传递。

Safari不支持execCommand（'copy'）API

https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

编辑：

如何使用textarea存储和复制值的示例（在FireFox中有效）：

<textarea id="textholder"></textarea>
<button onclick="copyPassword()">Get message</button>
<button onclick="copyToClipboard()">Add to clipboard</button>

var input = $('#textholder');

function copyPassword() {

    $.ajax({
        type: 'GET',
        url: 'https://jsonplaceholder.typicode.com/todos/1',

        success: function(msg) {
            input.val(msg.title);
        }
    });
}


function copyToClipboard() {
    input.select();
    document.execCommand("copy");
}

在此示例中，我使用了测试API，但只需替换为您自己的AJAX信息，它就可以正常工作。 该示例代码按原样工作，因此可以对其进行测试。 祝好运！

编辑2：

这是脚本的一个版本，仅按问题所有者的要求使用一个按钮。

在此版本中，API调用会自动运行，因此用户只需单击一下即可复制消息。

<textarea id="textholder"></textarea>
<button onclick="copyToClipboard()">Add to clipboard</button>

    var input = $('#textholder');

    function copyPassword() {

        $.ajax({
            type: 'GET',
            url: 'https://jsonplaceholder.typicode.com/todos/1',

            success: function(msg) {
                input.val(msg.title);
            }
        });
    }


    function copyToClipboard() {
        input.select();
        document.execCommand("copy");
    }

    document.onload = copyPassword();

在firefox中，必须通过用户事件（例如单击execCommand("copy")来触发execCommand("copy")的使用。 它不能用于自动运行的代码中，即使该代码调度了您侦听的事件也是如此。 它必须是浏览器中的用户操作，而不是触发它的代码。