小编典典

单击后如何以编程方式将异步相关内容复制到剪贴板?

ajax

我正在尝试以编程方式在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
):

  1. 由于JSONP无法同步,因此请将其转换为使用常规AJAX调用的内容,并确保AJAX调用在用户事件的执行上下文内是同步的。这与我根深蒂固的信念背道而驰,我们不应该进行同步XHR调用,因为它会降低用户体验。
  2. 当用户用鼠标接近复制按钮时,我们会抢先发送服务器请求,并希望它在用户单击按钮之前足够快。这是一个明显的竞争条件,它可能不是部分时间,并且在某些情况下,当用户想执行Ctrl / Command-C而不是单击“复制”按钮时,将无法正常工作。
  3. 执行两步过程。内容可用时,单击一次即可触发呼叫,显示一条消息,提示内容可用,然后在味精区域中单击另一次以复制到剪贴板。它似乎不是有史以来最好的UX交互。我使用此替代方法创建了此示例。以编程方式触发点击不会构成用户问题事件。
  4. 可能有一种方法可以创建一个简单的Chrome扩展程序,并让用户设置该扩展程序复制到剪贴板的权限。这涉及最终用户必须安装,扩展和更改本地浏览器设置。不确定许多用户是否有能力/愿意这样做。

我已经看过成问题,#2,如本,但他们并没有解决异步场景。如果您能找到其他可行的解决方案(或对现有解决方案进行调整),请告诉我。


阅读 307

收藏
2020-07-26

共1个答案

小编典典

这是基于您的代码段的工作超时方法:

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将其修改为易碎的变体,但是我没有尝试。

2020-07-26