javascript - 在 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’) 被拒绝，因为它不是从短时间运行的用户生成的事件处理程序中调用的。

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

Answer 1

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

来自 MDN:

Browser-specific considerations

Section The clipboard and other APIs involved here are evolving rapidly, so there are variations among browsers in how they work.

In Chrome:

You can write to the clipboard like this in all execution contexts - background pages, content scripts, options pages, and popups. You don't actually need "clipboardWrite", even to write to the clipboard outside a user-generated event handler.

In Firefox:

You can write to the clipboard with execCommand in all execution contexts except background pages. In Firefox you can't select text or focus an input field in background pages, so you can't write to the clipboard with execCommand from a background page. The Clipboard Web API doesn't have this limitation. The "clipboardWrite" permission is only supported from version 51 onward. From version 57 onward, you can copy images to the clipboard using the clipboard.setImageData() API. Support for the Clipboard API's navigator.clipboard.writeText() method was added in Firefox 63. When using content scripts, the Clipboard API is available only for HTTPS pages. As a workaround, use messaging between your content scripts and the background script.

The execCommand('copy') API isn't supported in Safari

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") 的使用必须由用户事件触发，例如单击。它不能用于自动运行的代码，即使该代码分派(dispatch)您监听的事件也是如此。它必须是浏览器中的用户操作，而不是触发它的代码。