Javascript:如何在没有特定用户事件的情况下复制到剪贴板

Question

我正在编写一个 webapp，其中客户端需要在数据可用时立即将数据复制到剪贴板。应在进行 REST 调用后立即复制数据，而不是通过用户事件进行复制。如果没有浏览器插件，这可能吗？我需要哪些权限才能执行此操作？

我只找到了this这篇文章很有帮助，但它仅适用于浏览器扩展。

所以这是服务器通过 websockets 触发的 ajax 调用，当它成功时，我想写入剪贴板:

$.ajax({
    url: hosturl + '/get-data?id=' + cookieid
}).then(function(data) {
    // data is of type string
    if (data.type === 'STRING') {
        $('#content-container').html(data.stringData);
        // not working
        navigator.clipboard.writeText(data.stringData);
        // also not working
       $('#content-container').select();
       document.execCommand("copy");
    }

Answer 1

您可以尝试一些 hacky 方法将数据复制到剪贴板。

其中一种方法是创建一个临时元素，聚焦并触发 Action 。

function copyToClipboard(str) {
  var el = document.createElement('textarea');  // Create a <textarea> element
  el.value = str;                                 // Set its value to the string that you want copied
  el.setAttribute('readonly', '');                // Make it readonly to be tamper-proof
  el.style.position = 'absolute';                 
  el.style.left = '-9999px';                      // Move outside the screen to make it invisible
  document.body.appendChild(el);                  // Append the <textarea> element to the HTML document
  var selected =            
    document.getSelection().rangeCount > 0        // Check if there is any content selected previously
      ? document.getSelection().getRangeAt(0)     // Store selection if found
      : false;                                    // Mark as false to know no selection existed before
  el.select();                                    // Select the <textarea> content
  document.execCommand('copy');                   // Copy - only works as a result of a user action (e.g. click events)
  document.body.removeChild(el);                  // Remove the <textarea> element
  if (selected) {                                 // If a selection existed before copying
    document.getSelection().removeAllRanges();    // Unselect everything on the HTML document
    document.getSelection().addRange(selected);   // Restore the original selection
  }
};

其他例子可以引用this article

此外还有一个新的 API - Clipboard API 但它现在仅适用于少数浏览器 - Clipboard API support