Копировать в буфер обмена после успешного вызова 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 с фоновой страницы.Веб-API буфера обмена не имеет этого ограничения.Разрешение «clipboardWrite» поддерживается только начиная с версии 51.Начиная с версии 57, вы можете копировать изображения в буфер обмена с помощью API clipboard.setImageData ().В Firefox 63 была добавлена ​​поддержка метода navigator.clipboard.writeText () API-интерфейса буфера обмена. При использовании скриптов содержимого API-интерфейс буфера обмена доступен только для страниц HTTPS.В качестве обходного пути используйте обмен сообщениями между сценариями содержимого и фоновым сценарием.

API execCommand ('copy') не поддерживается в 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") должно запускатьсяпользовательское событие, такое как щелчок.Его нельзя использовать в автоматически выполняемом коде, даже если этот код отправляет событие, которое вы слушаете.Это должно быть действие пользователя в браузере, а не фрагмент кода, который его запускает.