我正在尝试以编程方式在Chrome(版本43)中使用execCommand将异步JSONP请求的结果复制到剪贴板。这里是一个代码段的逻辑:
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(); }
我知道启动Chrome的内部版本43会使用带有剪贴板的execCommand。但是,问题在于您需要在用户发起的事件(提升权限的事件)的执行期间执行此操作。这是基于ZeroClipboard Flash的解决方案所具有的类似限制。除了得到不可能的答案(这是我现在考虑的问题)之外,还有其他我想到的最后选择(警告,它们都是Hail Mary Passes):
我已经看过成问题,#2,如本,但他们并没有解决异步场景。如果您能找到其他可行的解决方案(或对现有解决方案进行调整),请告诉我。
这是基于您的代码段的工作超时方法:
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规范。关于安全性和可信操作有一些限制。因此,您必须进行事件调用复制和ajax调用。这可以通过固定的超时(上面的代码)或适当的方式(通过易碎的睡眠)来完成。这里提到了新的睡眠功能,也许可以通过clearTimeout将其修改为易碎的变体,但是我没有尝试。