execCommand('copy') 在 Ajax/XHR 回调中不起作用？
[英]execCommand('copy') does not work in Ajax / XHR callback?
问题描述
(Tested using Chrome 44) 
（使用 Chrome 44 测试）
Desired behaviour : Make XHR request, put result in text area, select text, and copy to clipboard.期望的行为：发出 XHR 请求，将结果放入文本区域，选择文本，然后复制到剪贴板。
Actual behaviour : On successful XHR request, puts the result in text area and selects it, but fails to copy result to clipboard.实际行为：在 XHR 请求成功时，将结果放入文本区域并选择它，但无法将结果复制到剪贴板。 But if I initiate the copy outside of the XHR callback, it works.但是如果我在 XHR 回调之外启动副本，它就可以工作。
Example html page:示例 html 页面：
var selectAndCopy = function() { // Select text var cutTextarea = document.querySelector('#textarea'); cutTextarea.select(); // Execute copy var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Cutting text command was ' + msg); }; var fetchCopyButton = document.querySelector('#fetch_copy'); fetchCopyButton.addEventListener('click', function(event) { var xhr = new XMLHttpRequest(); xhr.open('get', 'http://httpbin.org/ip'); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { // Set text var textarea = document.querySelector('#textarea'); textarea.value = xhr.responseText; selectAndCopy(); } } }; xhr.send(); }); var copyButton = document.querySelector('#copy'); copyButton.addEventListener('click', function(event) { selectAndCopy(); });
<html> <head> </head> <body> <p> <textarea id="textarea">Hello, I'm some text!</textarea> </p> <p> <button id="fetch_copy">Fetch Data and Copy Textarea</button> <button id="copy">Copy Textarea</button> </p> </body> </html>
If you press the "Fetch Data and Copy Textarea" button the data is successfully fetched but not copied.如果您按下“获取数据并复制文本区域”按钮，数据将被成功获取但未被复制。 If you press the "Copy Textarea" button the text is copied as expected.如果您按“复制文本区域”按钮，文本将按预期复制。 I've tried many combinations of request/copy to try and get it to work but to no avail (including programmatically pressing the copy button after fetching data).我尝试了多种请求/复制组合来尝试使其工作但无济于事（包括在获取数据后以编程方式按下复制按钮）。 Does anyone know what's going on here?有谁知道这里发生了什么？ Is this a security feature or something?这是安全功能还是什么？
I don't want the user to have to press two buttons to fetch and copy if possible.如果可能，我不希望用户必须按两个按钮来获取和复制。
2 个解决方案
解决方案1
17 已采纳 2015-08-10 17:54:28
You can only trigger a copy to the system clipboard in direct response to a trusted user action, such as a click event.您只能触发复制到系统剪贴板以直接响应受信任的用户操作，例如click事件。
Spec: http://www.w3.org/TR/clipboard-apis/#integration-with-rich-text-editing-apis规范： http : //www.w3.org/TR/clipboard-apis/#integration-with-rich-text-editing-apis
解决方案2
8 2016-06-17 18:49:16
DISCLAIMER: Synchronous XMLHttpRequests are not recommended on the main thread.免责声明：不建议在主线程上使用同步 XMLHttpRequest。 Please read this and make sure you know what you're doing before using this solution.在使用此解决方案之前，请阅读本文并确保您知道自己在做什么。 THIS IS NOT RECOMMENDED FOR PRODUCTION USE.不建议将其用于生产用途。
If you make the XMLHttpRequest synchronous, this will work.如果您使 XMLHttpRequest 同步，这将起作用。 You just have to add false as the third parameter to xhr.open(...) :您只需将false添加为xhr.open(...)的第三个参数：
var selectAndCopy = function() { // Select text var cutTextarea = document.querySelector('#textarea'); cutTextarea.select(); // Execute copy var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Cutting text command was ' + msg); }; var fetchCopyButton = document.querySelector('#fetch_copy'); fetchCopyButton.addEventListener('click', function(event) { var xhr = new XMLHttpRequest(); xhr.open('get', 'http://httpbin.org/ip', false); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { // Set text var textarea = document.querySelector('#textarea'); textarea.value = xhr.responseText; selectAndCopy(); } } }; xhr.send(); }); var copyButton = document.querySelector('#copy'); copyButton.addEventListener('click', function(event) { selectAndCopy(); });
<html> <head> </head> <body> <p> <textarea id="textarea">Hello, I'm some text!</textarea> </p> <p> <button id="fetch_copy">Fetch Data and Copy Textarea</button> <button id="copy">Copy Textarea</button> </p> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.