我正在尝试以编程方式使用Chrome(Build 43)中的execCommand将异步JSONP请求的结果复制到剪贴板。这是逻辑的snippet:
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();
}
我知道您开始构建43版本的Chrome使用execCommand和剪贴板。但问题是,您需要在执行用户发起的事件(其中权限被提升)中执行此操作。 这是ZeroClipboard基于闪存的解决方案所具有的类似限制。 除了得到一个不可能的答案(这是我现在正在思考的问题)之外,这些是我想做的其他选择(警告,它们都是Hail Mary Passes):
我已经研究过诸如this之类的Stackoverflow问题,但它们没有解决异步情况。 如果您能找到任何其他可行的解决方案(或对现有解决方案进行调整),请告诉我。
答案 0 :(得分:6)
这是基于您的代码段的工作超时方法:
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
}
});
主要问题是execCommand规范。有关安全性和trusted操作的一些限制。所以你必须制作事件调用副本和ajax调用公寓。这可以通过可破坏的睡眠以脏方式 - 通过固定超时(上面的代码)或正确的方式完成。提到了新的睡眠功能here,也许可以通过clearTimeout修改为可破坏的变体,但我没有尝试。