不能使用`document.execCommand('copy');`来自开发者控制台

Question

调用document.execCommand('copy'); false每次都会从Chrome开发者控制台返回.

亲自尝试一下.打开控制台并运行它,它永远不会成功.

知道为什么？

Answer 1

document.execCommand('copy')必须由用户触发.它不仅来自控制台,而且不在用户触发的事件中.如下所示,click事件将返回true,但是没有事件的调用将不会和调度事件中的调用也是如此.

console.log('no event', document.execCommand('bold'));

document.getElementById('test').addEventListener('click', function(){
    console.log('user click', document.execCommand('copy'));
});

document.getElementById('test').addEventListener('fakeclick', function(){
    console.log('fake click', document.execCommand('copy'));
});


var event = new Event('fakeclick')

document.getElementById('test').dispatchEvent(event) ;

<div id="test">click</ha>

请参见:https://w3c.github.io/editing/execCommand.html#dfn-the-copy-command

从document.execCommand()触发的复制命令只会影响真实剪贴板的内容,前提是从用户信任和触发的事件调度事件,或者实现配置为允许此事件.如何配置实现以允许对剪贴板的写访问超出了本规范的范围.

Answer 2

或者,使用copy()Chrome Dev工具内置的命令.您无法使用,document.execCommand("copy")因为需要用户操作才能触发它.

该copy()命令允许您复制任何字符串(或对象作为JSON).要模拟,document.execCommand("copy")您可以通过以下方式获取当前选择getSelection().toString():

copy(getSelection().toString())

如果您需要进行实际测试document.execCommand("copy")(例如,调试使用它的脚本),并且由于某些原因使用调试器并不理想,您可以将代码包装在单击处理程序中,然后单击您的页面:

document.body.addEventListener("click", function() {
    console.log("copy", document.execCommand("copy"));
}, false);