无法从开发人员控制台使用“document.execCommand('copy');”
Cannot use `document.execCommand('copy');` from developer console
每次都从 Chrome 开发者控制台 returns false
调用 document.execCommand('copy');。
亲自尝试一下。打开控制台并运行它,它永远不会成功。
知道为什么吗?
我认为,copy
命令需要在浏览器上获得焦点,当您转到控制台并执行命令时,当前 window 失去焦点。但可能是其他原因,因为如果我让步 setTimeout()
.
作为替代方案,使用 Chrome 开发工具中内置的 copy()
命令。您不能使用 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);
document.execCommand('copy')
必须由用户触发。它不仅来自控制台,还存在于用户触发的事件之外的任何地方。见下文,点击事件将 return 为真,但没有事件的调用不会,并且在已调度事件中的调用也不会。
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
Copy commands triggered from document.execCommand() will only affect
the contents of the real clipboard if the event is dispatched from an
event that is trusted and triggered by the user, or if the
implementation is configured to allow this. How implementations can be
configured to allow write access to the clipboard is outside the scope
of this specification.
此方法适用于最新版本的 safari
const copyUrl = (url, cb) => {
try {
var input = document.getElementById('copyInput')
input.value = url
input.focus()
input.select()
if (document.execCommand('copy', false, null)) {
Message('复制成功')
} else {
Message({
message: '当前浏览器不支持复制操作,请使用Ctrl+c手动复制',
type: 'warning'
})
}
} catch (e) {
Message({
message: `复制出错:${e}`,
type: 'error'
})
}
}
每次都从 Chrome 开发者控制台 returns false
调用 document.execCommand('copy');。
亲自尝试一下。打开控制台并运行它,它永远不会成功。
知道为什么吗?
我认为,copy
命令需要在浏览器上获得焦点,当您转到控制台并执行命令时,当前 window 失去焦点。但可能是其他原因,因为如果我让步 setTimeout()
.
作为替代方案,使用 Chrome 开发工具中内置的 copy()
命令。您不能使用 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);
document.execCommand('copy')
必须由用户触发。它不仅来自控制台,还存在于用户触发的事件之外的任何地方。见下文,点击事件将 return 为真,但没有事件的调用不会,并且在已调度事件中的调用也不会。
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
Copy commands triggered from document.execCommand() will only affect the contents of the real clipboard if the event is dispatched from an event that is trusted and triggered by the user, or if the implementation is configured to allow this. How implementations can be configured to allow write access to the clipboard is outside the scope of this specification.
此方法适用于最新版本的 safari
const copyUrl = (url, cb) => {
try {
var input = document.getElementById('copyInput')
input.value = url
input.focus()
input.select()
if (document.execCommand('copy', false, null)) {
Message('复制成功')
} else {
Message({
message: '当前浏览器不支持复制操作,请使用Ctrl+c手动复制',
type: 'warning'
})
}
} catch (e) {
Message({
message: `复制出错:${e}`,
type: 'error'
})
}
}