javascript - contentwindow - No se puede usar `document.execCommand(''copy'');` desde la consola del desarrollador

javascript select and copy to clipboard

Question

Llamando document.execCommand(''copy''); Desde la consola de desarrollador de Chrome devuelve false cada vez.

Pruébalo tú mismo. Abre la consola y ejecútala, nunca tiene éxito.

¿Alguna idea del por qué?

Answer 1

Como alternativa, use el comando copy() que está integrado en las herramientas Chrome Dev. No puede usar document.execCommand("copy") porque eso requiere la acción del usuario para activarlo.

El comando copy() permite copiar cualquier cadena (u objeto como JSON). Para emular document.execCommand("copy") puede obtener la selección actual con getSelection().toString() :

copy(getSelection().toString())

Si necesita probar document.execCommand("copy") específicamente (por ejemplo, para depurar un script que lo usa), y usar el depurador no es ideal por alguna razón, puede envolver su código en un controlador de clic. y luego haga clic en su página:

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

Answer 2

Creo que, el comando de copy requiere estar centrado en el navegador, y cuando vas a la Consola y ejecutas el comando, la ventana actual pierde el foco. Pero podrían ser otras razones, ya que funcionó si doy en setTimeout() .

Answer 3

document.execCommand(''copy'') debe ser activado por el usuario. No es solo desde la consola, está en cualquier lugar que no esté dentro de un evento desencadenado por el usuario. Vea a continuación, el evento de clic devolverá verdadero, pero una llamada sin evento no lo hará y una llamada en un evento despachado también.

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>

Consulte aquí: https://w3c.github.io/editing/execCommand.html#dfn-the-copy-command

Los comandos de copia activados desde document.execCommand () solo afectarán el contenido del portapapeles real si el evento se envía desde un evento de confianza y activado por el usuario, o si la implementación está configurada para permitirlo. La forma en que se pueden configurar las implementaciones para permitir el acceso de escritura al portapapeles está fuera del alcance de esta especificación.

Answer 4

Este método funciona en la última versión de 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''
    })
  }
}