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的剪贴板。剪贴板网站   API没有此限制。 “ clipboardWrite”权限是   仅从版本51开始受支持。从版本57开始，您可以   使用Clipboard.setImageData（）API将图像复制到剪贴板。   支持剪贴板API的navigator.clipboard.writeText（）方法   是在Firefox 63中添加的。使用内容脚本时，剪贴板API   仅适用于HTTPS页面。解决方法是使用消息传递   在您的内容脚本和后台脚本之间。

Safari中不支持execCommand（'copy'）API

https://developer.mozilla.org/en-US/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")的使用必须由用户事件（例如单击）触发。它不能用于自动运行的代码中，即使该代码调度了您侦听的事件也是如此。它必须是浏览器中的用户操作，而不是触发它的代码。

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

1 个答案: