Saltar al contenido

navigator.clipboard no está definido

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 / …

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *