navigator.clipboard is undefined
you can write an all-in-one wrapper function.
- if in secure context (https) : use navigator clipboard api
- if not : use the 'out of viewport hidden text area' trick
// 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();
});
}
}
use :
copyToClipboard("I'm going to the clipboard !")
.then(() => console.log('text copied !'))
.catch(() => console.log('error'));
ps : do not try it in a repl like jsfiddle/copeden/...
Try this:
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);
});
This requires a secure origin — either HTTPS or localhost (or disabled by running Chrome with a flag). Just like for ServiceWorker, this state is indicated by the presence or absence of the property on the navigator object.
https://developers.google.com/web/updates/2018/03/clipboardapi
This is noted in the spec with [SecureContext] on the interface: https://w3c.github.io/clipboard-apis/#dom-navigator-clipboard
You can check the state of window.isSecureContext
to learn if that's the reason a feature is unavailable. Secure contexts | MDN
And yes, you should set up HSTS to make sure HTTP redirects to HTTPS.