navigator.clipboard is undefined
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.
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 promisefunction 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);});