Solución:
Esto requiere un origen seguro, ya sea HTTPS o localhost (o deshabilitado ejecutando Chrome con una bandera). Al igual que para ServiceWorker, este estado se indica mediante la presencia o ausencia de la propiedad en el objeto del navegador.
https://developers.google.com/web/updates/2018/03/clipboardapi
Esto se indica en la especificación con [SecureContext] en la interfaz: https://w3c.github.io/clipboard-apis/#dom-navigator-clipboard
Puedes comprobar el estado de window.isSecureContext
para saber si esa es la razón por la que una función no está disponible. Contextos seguros | MDN
Y sí, debe configurar HSTS para asegurarse de que HTTP redireccione a HTTPS.
Prueba esto:
if (typeof(navigator.clipboard)=='undefined') {
console.log('navigator.clipboard');
var textArea = document.createElement("textarea");
textArea.value = linkToGo;
textArea.style.position="fixed"; //avoid scrolling to bottom
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
toastr.info(msg);
} catch (err) {
toastr.warning('Was not possible to copy te text: ', err);
}
document.body.removeChild(textArea)
return;
}
navigator.clipboard.writeText(linkToGo).then(function() {
toastr.info(`successful!`);
}, function(err) {
toastr.warning('unsuccessful!', err);
});
puede escribir una función contenedora todo en uno.
- si está en contexto seguro (https): use la api del portapapeles del navegador
- si no: use el truco ‘fuera del área de texto oculta de la ventana gráfica’
// return a promise
function copyToClipboard(textToCopy) {
// navigator clipboard api needs a secure context (https)
if (navigator.clipboard && window.isSecureContext) {
// navigator clipboard api method'
return navigator.clipboard.writeText(textToCopy);
} else {
// text area method
let textArea = document.createElement("textarea");
textArea.value = textToCopy;
// make the textarea out of viewport
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
return new Promise((res, rej) => {
// here the magic happens
document.execCommand('copy') ? res() : rej();
textArea.remove();
});
}
}
usar :
copyToClipboard("I'm going to the clipboard !")
.then(() => console.log('text copied !'))
.catch(() => console.log('error'));
ps: no lo intente en una respuesta como jsfiddle / copeden / …