javascript - page - obtener url actual wordpress

¿Cómo pegar en click? Funciona en google docs.

Question

Quiero poder iniciar un evento de pegado real cuando el usuario haga clic. Puedo entender que esto puede ser un problema de seguridad, porque si alguna página web tuviera acceso al portapapeles de los usuarios, eso sería malo. Así que pensé que todos los navegadores no permiten acceder a los datos del portapapeles.

Pero, por ejemplo, en Google Docs (en la aplicación similar a Word), puedo pegar desde el menú contextual personalizado (con el botón derecho del mouse, hacer clic en un elemento html que pretende ser un menú contextual), incluso si los datos del portapapeles se han copiado al portapapeles en diferentes aplicación como Microsoft Paint. Esto funciona en el navegador Google Chrome, que es el navegador de mi interés.

Pensé que lo hacían usando flash, pero aún funciona aunque deshabilito completamente flash en Chrome. Ya había una question sobre esto, pero la respuesta mencionada no es correcta. Otra respuesta de esa pregunta sugiere que Google está usando una extensión de Chrome para esto, pero aún funciona aunque deshabilito todas las extensiones en Chrome.

Cómo reproducir en windows:

• deshabilitar flash en chrome, deshabilitar todas las extensiones
• reiniciar
• vaya a google docs y abra un nuevo documento de escritura vacío (docs, no hoja de cálculo)
• ejecutar la aplicación de pintura de microsoft en windows
• dibuje algo en Microsoft Paint, presione Ctrl + A para seleccionar todo, Ctrl + C para copiar
• vuelva a la página vacía de documentos de Chrome y haga clic con el botón derecho en la página vacía
• seleccione Pegar desde el menú contextual artificial (observe que el menú contextual no es el menú nativo de Windows, sino que proviene de la página web html de Google Docs)
• verá que la imagen del portapapeles se pegó en el documento de documentos (!)
• ¿Cómo lo hacen?

Sé cómo acceder a los datos del portapapeles si el usuario presiona Ctrl + V en mi página web, porque esto activa el evento Pegar en la ventana actual. Pero, ¿cómo puedo acceder a los datos del portapapeles o iniciar el pegado de los datos reales del portapapeles (por ejemplo, un mapa de bits copiado en mspaint) en javascript (o usar jquery) mientras el usuario simplemente hace clic en un botón o div?

Answer 1

Quiero poder iniciar un evento de pegado real cuando el usuario haga clic. Puedo entender que esto puede ser un problema de seguridad, porque ...

Lo anterior es la línea de fondo.

Teniendo este código JS Fiddle

var Copy = document.getElementById(''copy''),
Cut = document.getElementById(''cut''),
Paste = document.getElementById(''paste'');
// Checking Clipboard API without an action from the user
console.log(''Copy:'' + document.queryCommandSupported(''copy''));
console.log(''Cut:'' + document.queryCommandSupported(''cut''));
console.log(''Paste:'' + document.queryCommandSupported(''paste''));
//Now checking the clipboard API upon a user action
Copy.addEventListener(''click'', function(){
console.log(''Copy:'' + document.queryCommandSupported(''copy''));
});
Cut.addEventListener(''click'', function(){
console.log(''Cut:'' + document.queryCommandSupported(''cut''));
});
Paste.addEventListener(''click'', function(){
console.log(''Paste:'' + document.queryCommandSupported(''paste''));
});

<button id="copy">Copy</button>
<button id="cut">Cut</button>
<button id="paste">Pate</button>

Si lo verifica con diferentes navegadores, verá cómo los navegadores reaccionan de manera diferente al tratar con la API del Portapapeles utilizando queryCommandSupported() el resultado es:

Cromo 47:

• Sin la acción del usuario, Copiar: false , Cortar: false , Pasado: false
  
• Con la acción del usuario, Copiar: true , Cortar: true , Pegar: false

Firefox 43:

• Sin la acción del usuario, Copiar: true , Cortar: true , Pasado: false
  
• Con la acción del usuario, Copiar: true , Cortar: true , Pegar: false

IE11: - Creo que es lo mismo en Edge

• Sin la acción del usuario, Copiar: true , Cortar: true , Pasado: true
  
• Con la acción del usuario, Copiar: true , Cortar: true , Pegar: true
  
• Si bien todas las opciones son verdaderas, IE solicita permiso al usuario para realizar todas las acciones anteriores.

Safari: - lo mismo para iOS Safari

• Solo activa el evento de copia en una selección válida y solo corta y pega en campos editables enfocados.
  
• Solo lectura / escritura del portapapeles del SO a través de teclas de acceso directo, no a través de document.execCommand() .
  

Para obtener información detallada sobre la compatibilidad de los navegadores con la API del Portapapeles caniuse.com/#search=clip

Los navegadores también admiten pegar utilizando el menú contextual del botón derecho para los elementos conteneditable="true" como en este JS Fiddle 2

Pero, por ejemplo, en Google Docs (en la aplicación similar a Word), puedo pegar desde el menú contextual personalizado (con el botón derecho del mouse, hacer clic en un elemento html que pretende ser un menú contextual), incluso si los datos del portapapeles se han copiado al portapapeles en diferentes aplicación como Microsoft Paint.

Pensé que lo hacían usando flash, pero aún funciona aunque deshabilito completamente flash en Chrome.

De la documentación de Google Apps Script para desarrollar complementos para Google Apps :
" El editor de código de Platform: Apps Script es una aplicación web que se inicia desde Google Sheets, Docs o Forms. El lenguaje se basa en JavaScript, but executes on Google''s servers rather than directly in the user''s browser (con la excepción del cliente -interfaces de usuario ... ".

Dado que se está ejecutando en sus servidores, creo que pueden habilitar ciertas funciones, o incluso usar Java, para una mejor experiencia.

EDITAR 1:
Si marca clipboard.js , verá que la biblioteca no tiene una opción para "pegar", solo "copiar" y "cortar", también en la sección " Soporte del navegador " al final de la página ver que la biblioteca se basa en la API execCommand , y no funciona en Safari.

EDIT 2:
Tras una actualización de la pregunta y comentarios, para la parte de documentos de Google, presioné Prt Sc para tener una captura de pantalla en el portapapeles, abrí Google docs en Chrome, hice clic con el botón derecho y luego hice clic en "Pegar" desde el contexto personalizado. Menú y seguro que funciona, abrí Google docs en Firefox y tan pronto como hice clic en la opción "pegar" obtuve esta respuesta

También para el registro, traté de hacer lo mismo en IE11 y sigue intentando lanzar documentos de Google desde 21 minutos.

Entonces, la conclusión es probablemente, y en su mayoría, " Google " Chrome tiene una excepción: - algo así como una declaración condicional - para los documentos de " Google " y otros servicios de Google en su navegador, también creo que @julien-gregoire tenía razón en que era una Extensión en Firefox.

Desde esta página de soporte de documentos de Google :

Por razones de seguridad, la mayoría de los navegadores no permiten que las aplicaciones web como Docs, Sheets y Slides utilicen el portapapeles de su computadora a través de los menús.

Sin embargo, si utiliza Chrome, puede otorgar permiso para acceder a su portapapeles instalando la aplicación Google Drive Chrome. Esto le permite usar el menú del botón derecho para copiar y pegar contenido (o seleccione "Copiar" o "Pegar" en el menú Editar de la barra de herramientas). Para instalar la aplicación, visite Chrome Web Store.

Y esta pequeña página de negocios :

Sin los atajos de teclado, tiene dos opciones más para copiar y pegar: vaya al menú "Editar" y seleccione "Copiar" o "Pegar", o haga clic con el botón derecho en el documento y seleccione "Copiar" o "Pegar" en El menú contextual. En Google Docs, estas dos opciones solo están disponibles para los usuarios de Chrome que tienen instalada la aplicación web de Google Drive. La aplicación es gratuita, pero no está disponible para otros navegadores.

Así que parece que ya han implementado esa aplicación como característica incorporada en las versiones más recientes de Chrome.

Answer 2

La pasta personalizada funciona en Chrome, pero solo a través de una extensión. Si observa el código de Google Docs, verá que sin la extensión instalada, no puede pegar. Y puedes probar en Firefox usar el menú contextual pegado, te dirá que no está disponible y que necesitas usar CTRL + V. Puedes encontrar esto en el código fuente de google docs:

Copiar y pegar requiere la aplicación web gratuita de Google Drive. Esto nos permite acceder a su portapapeles para que pueda cortar, copiar y pegar.

Así que parece claro que el comando de pegar necesita una extensión para funcionar.

Una forma de hacerlo es usar execCommand(''paste'') que no funciona cuando se llama desde una página, pero en realidad funciona en una secuencia de comandos de contenido de extensión. Solo necesita agregar el portapapelesLeer a los permisos manifest.json , como este:

permissions: {
...
"clipboardRead"
...
}

Luego, en el contenido, el document.execCommand(''paste'') funcionará.

EDITAR:

Como lo señalan @ tomas-M y @ Mi-Creativity, la implementación en Google docs en Chrome parece estar en Chrome en sí, no en una extensión expuesta. Tal vez esto puede dar una pista de dónde se define: https://code.google.com/p/chromium/codesearch#chromium/src/chrome/common/extensions/api/_permission_features.json&q=clipboardRead&sq=package:chromium&dr=C&l=164 : https://code.google.com/p/chromium/codesearch#chromium/src/chrome/common/extensions/api/_permission_features.json&q=clipboardRead&sq=package:chromium&dr=C&l=164 & https://code.google.com/p/chromium/codesearch#chromium/src/chrome/common/extensions/api/_permission_features.json&q=clipboardRead&sq=package:chromium&dr=C&l=164

Es difícil decir si realmente es así como funciona, pero en cualquier caso, puede "desbloquear" execCommand(''paste'') para otro sitio a través de una extensión. No es muy práctico, pero funciona.

Y probar document.execCommand(''paste'') en la consola, mientras que en google docs da verdadero, mientras que en otras páginas da falso, así que realmente creo que es así como se implementa esta característica en google docs.