web-dev-qa-db-fra.com

Firefox - document.execCommand («couper» / «copier») a été refusé car il n'a pas été appelé depuis l'intérieur d'un gestionnaire d'événements généré par l'utilisateur de courte durée

Je développe une application sur une seule page, j'ai un bouton sur la page, lorsqu'un utilisateur clique sur le bouton, je souhaite effectuer un appel ajax vers mon serveur, puis copier la valeur retournée (via rappel) dans le presse-papiers de l'utilisateur.

Chaque composant fonctionne de manière isolée, mais lorsque je les colle ensemble, Firefox renvoie l'erreur suivante:

document.execCommand ("couper"/"copier") a été refusé car il n'a pas été appelé depuis l'intérieur d'un gestionnaire d'événements généré par l'utilisateur de courte durée

Je voudrais connaître les détails de cette erreur, mais il n'y a absolument aucune information en ligne; quelles sont les conditions limites qui déclenchent cette erreur, est-ce une profondeur de pile, un timeout, etc.?

javascripthtmlfirefoxcopy-paste
17
mils

Enveloppez votre appel execCommand('cut'/'copy') avec demande asynchrone pour l'exécuter après le user event le traitement est terminé.

Exemple avec $.Deferred:

function asyncCall() {
   return $.Deferred().resolve().promise();
}

asyncCall().then(function() {
    var supported = document.queryCommandSupported('copy');
    if (supported) {
        // ... select action
        document.execCommand('copy');
    }
});
0
Andrii Verbytskyi

Je devais juste régler ce problème.

Pour moi, la solution a simplement été définie sur async sur false, car l'appel est assez rapide.

0
beginner_

Vous pouvez voir le lien sur le presse-papiers. Sinon, vous utilisez synchrone. Exemple:

 $.ajax({
   method: "GET",
   async: false,
   url: {your_url},
   success: function(res) {
     let link= res.link;
     let temp_raw = $("<input>");
     $("body").append(temp_raw);
     temp_raw.val(link);
     temp_raw.select();
     document.execCommand("copy");
     temp_raw.remove();
   }
});
0
MinIsNghia