Come copiare a livello di codice il contenuto dipendente asincrono negli Appunti dopo un clic?

Question

Sto provando a utilizzare a livello di codice execCommand in Chrome (Build 43) per copiare il risultato di una richiesta JSONP asincrona negli Appunti. Ecco un snippet della logica:

loadContent() 

function loadContent(callback) { 
    $.getJSON('http://www.randomtext.me/api/lorem/p-5/10-20?&callback=myFunc',function(result){ 
    console.log('result=',result.text_out); 
    $("#container").html(result.text_out); 
    if (callback) { 
     callback(); 
    } 
    }); 
} 

function copyAjax() { 

loadContent(copy); 

} 

function copy() { 
    var copyDivText = $('#container').text(); 
    console.log('copyDivText=',copyDivText); 
    executeCopy(copyDivText); 
} 

document.addEventListener("DOMContentLoaded", function(){ 
     document.getElementById("copy").onclick = copy; 
    }); 


document.addEventListener("DOMContentLoaded", function(){ 
     document.getElementById("copyAjax").onclick = copyAjax; 
    }); 


// Copy text as text 
function executeCopy(text) { 
    var input = document.createElement('textarea'); 
    document.body.appendChild(input); 
    input.value = text; 
    input.focus(); 
    input.select(); 
    document.execCommand('Copy'); 
    input.remove(); 
} 

So che a partire costruire 43 di Chrome si utilizza il codice di execCommand con appunti. Il problema, tuttavia, è che è necessario farlo nell'esecuzione di un evento originato dall'utente (in cui le autorizzazioni sono elevate). Questa è una restrizione simile a quella della soluzione basata su flash ZeroClipboard. eccezione di ottenere una risposta che non è possibile (che è quello che rifletto circa ora), queste sono le altre opzioni ho pensato di fare come ultima risorsa (attenzione, sono tutti Hail Mary Passes):

1. Dal JSONP non può essere sincrono, trasformarlo in qualcosa che utilizza una normale chiamata AJAX e assicurarsi che la chiamata AJAX sia sincrona all'interno del contesto di esecuzione dell'evento utente. Questo va contro la mia convinzione profondamente radicata che non dovremmo fare chiamate XHR sincrone poiché peggiora l'esperienza dell'utente.
2. Mentre l'utente si avvicina al pulsante di copia con il mouse, inviamo preventivamente la richiesta del server e speriamo che sia abbastanza veloce prima che l'utente faccia clic sul pulsante. Questa è una condizione di gara ovvia che potrebbe non far parte del tempo e non funzionerà per certo quando l'uso vuole eseguire un Ctrl/Comando-C invece di fare clic sul pulsante Copia.
3. Eseguire una procedura in due passaggi. Un clic per attivare la chiamata, quando il contenuto è disponibile, mostrare un messaggio il contenuto è disponibile e premere un altro clic nell'area del messaggio per copiare negli appunti. Non sembra la migliore interazione UX di sempre. Ho creato this example con questa alternativa. L'attivazione di un clic a livello di codice non costituisce un evento relativo ai problemi degli utenti.
4. Potrebbe esserci un modo per creare una semplice estensione di Chrome e consentire all'utente di impostare l'autorizzazione per tale estensione da copiare negli Appunti. Ciò implica che l'utente finale deve installare ed estendere e modificare le impostazioni del browser locale. Non sono sicuro che molti utenti saranno in grado/disposti a farlo.

Ho già esaminato le domande StackOverflow come this, ma non affrontano uno scenario asincrono. Per favore fatemi sapere se è possibile trovare qualsiasi altra soluzione praticabile (o un tweak su quello esistente).

Answer 1

Questo è il lavoro approccio in base al timeout frammento:

HTML:

<div id="container"> 
Enter Text To Copy</br> 
<textarea id="clipboard"></textarea> 
</div> 
<input type="button" value="Copy" id="copy"/> 

JS:

var timeout = 600; // timeout based on ajax response time 
var loaded = false; 

function loadContent() { 
    loaded = false; 
    $.getJSON('http://codepen.io/gkohen/pen/QbvoQW.js',function(result){ 
    document.getElementById("clipboard").value = result.lorem; 
    loaded = true; 
    }); 
} 

// Copy text as text 
function copy() { 
    clipboard = document.getElementById("clipboard"); 
    if (!loaded || clipboard.value.length == 0) { 
    alert("Ajax timeout! TIP: Try to increase timeout value."); 
    return; 
    } 

    clipboard.focus(); 
    clipboard.select(); 

    if (document.execCommand('Copy')) 
    alert("Successfuly coppied to clipboard!"); 

    // set defaults 
    clipboard.value = ""; 
    loaded = false; 
} 

document.addEventListener("DOMContentLoaded", function(){ 
    document.getElementById("copy").onmousedown = loadContent; 
    document.getElementById("copy").onclick = function() { 
    setTimeout(copy, timeout); // wait for ajax 
    } 
}); 

Il problema principale è specifica execCommand. Esistono alcune restrizioni sulla sicurezza e le azioni trusted. Quindi devi fare una chiamata all'evento copy e ajax call aparte. Questo può essere fatto in modo sporco - tramite un timeout fisso (codice sopra) o modo corretto - da un sonno fragile. La nuova funzionalità di sonno è menzionata here e forse può essere modificata in una variante divisibile tramite clearTimeout, ma non l'ho provato.