L’API Clipboard est la méthode de fonctionnement du presse-papiers de nouvelle génération, plus puissante et plus raisonnable que la méthode traditionnelle. Document.execCommand() méthode. Toutes ses opérations sont asynchrones et renvoient des objets Promise sans provoquer de bourrages de pages. De plus, il peut placer du contenu arbitraire (tel que des images) dans le presse-papiers. Le navigator.clipboard La propriété renvoie l’objet Clipboard et toutes les opérations sont effectuées via cet objet.
const clipboardObj = navigator.clipboard;
Si la navigator.clipboard retours de propriété undefinedcela signifie que le navigateur actuel ne prend pas en charge cette API (vous pouvez voir le tableau complet de compatibilité sur Puis-je utiliser…). Étant donné que les utilisateurs peuvent mettre des données sensibles (telles que des mots de passe) dans le presse-papiers, permettre aux scripts de les lire arbitrairement entraînera des risques de sécurité, cette API a donc plus de restrictions de sécurité. Tout d’abord, le navigateur Chrome stipule que seules les pages du protocole HTTPS peuvent utiliser cette API. Cependant, l’environnement de développement (localhost) permet l’utilisation de protocoles non chiffrés. Deuxièmement, l’autorisation de l’utilisateur doit être clairement obtenue lors de l’appel. L’implémentation spécifique des autorisations utilise l’API Permissions. Il existe deux autorisations liées au presse-papiers : clipboard-write (autorisation d’écriture) et clipboard-read (lire l’autorisation). L’« autorisation d’écriture » est automatiquement accordée au script et l’« autorisation de lecture » doit être explicitement accordée par l’utilisateur. En d’autres termes, le script peut être automatiquement complété lors de l’écriture dans le presse-papiers, mais lors de la lecture du presse-papiers, le navigateur affichera une boîte de dialogue demandant si l’utilisateur accepte de lire.
De plus, il convient de noter que ce que lit le script est toujours le presse-papier de la page en cours. Un problème que cela entraîne est que si vous collez le code correspondant dans l’outil de développement et l’exécutez directement, une erreur peut être signalée car la page actuelle est actuellement la fenêtre de l’outil de développement, pas une page Web.
Si vous collez le code ci-dessus dans l’outil de développement et l’exécutez, une erreur sera signalée. Parce que lorsque le code est en cours d’exécution, la fenêtre de l’outil de développement est la page actuelle et il n’y a pas d’interface DOM dont l’API du Presse-papiers dépend de cette page. Une solution consiste à mettre le code approprié dans setTimeout() pour retarder l’exécution, et à cliquer rapidement sur la fenêtre de page du navigateur avant d’appeler la fonction pour la transformer en page actuelle.
Une fois le code ci-dessus collé dans l’outil de développement pour l’exécuter, cliquez rapidement sur la fenêtre de la page Web pour en faire la page actuelle, afin qu’aucune erreur ne soit signalée.
Objet Presse-papiers
clipboard.readText()
Le clipboard.readText() La méthode est utilisée pour copier les données texte dans le presse-papiers.
Dans l’exemple ci-dessus, après que l’utilisateur a cliqué sur la page, le texte du presse-papiers sera affiché. Notez que le navigateur affichera une boîte de dialogue à ce moment-là, demandant à l’utilisateur s’il accepte le script pour lire le presse-papiers.
Si l’utilisateur n’est pas d’accord, le script signalera une erreur. A ce moment, vous pouvez utiliser le try...catch structure pour gérer les erreurs.
clipboard.read()
Le clipboard.read() La méthode est utilisée pour copier les données dans le presse-papiers, qui peuvent être des données texte ou des données binaires (telles que des images). Cette méthode nécessite l’autorisation explicite de l’utilisateur. Cette méthode renvoie un objet Promise. Une fois l’état de l’objet résolu, un tableau peut être obtenu et chaque membre du tableau est une instance d’un objet ClipboardItem.
L’objet ClipboardItem représente un élément de clip unique et chaque élément de clip possède un clipboardItem.types une propriété et un clipboardItem.getType() méthode. Le clipboardItem.types La propriété renvoie un tableau dont les membres sont les types MIME disponibles pour l’élément de clip. Par exemple, un élément de clip peut être collé au format HTML ou au format texte brut. Ensuite, il a deux types MIME (text/html et text/plain). Le clipboardItem.getType(type) La méthode est utilisée pour lire les données de l’élément de clip et renvoie un objet Promise. Cette méthode accepte le type MIME de l’élément de clip comme paramètre et renvoie les données de ce type. Ce paramètre est obligatoire, sinon une erreur sera signalée.
clipboard.writeText()
Le clipboard.writeText() La méthode est utilisée pour écrire du contenu textuel dans le presse-papiers.
L’exemple ci-dessus est qu’après que l’utilisateur a cliqué sur la page Web, le script écrit les données texte dans le presse-papiers. Cette méthode ne nécessite pas l’autorisation de l’utilisateur, mais il est préférable de la mettre en place try...catch pour éviter les erreurs.
presse-papiers.write()
Le clipboard.write() La méthode est utilisée pour écrire des données arbitraires dans le presse-papiers, qui peuvent être des données texte ou des données binaires. Cette méthode accepte une instance ClipboardItem comme paramètre, qui représente les données écrites dans le presse-papiers.
Dans l’exemple ci-dessus, le script écrit une image dans le presse-papiers. Notez que le navigateur Chrome actuellement (jusqu’à ce que cet auteur écrive cet article) ne prend en charge que l’écriture d’images au format PNG. clipboardItem() est un constructeur fourni nativement par le navigateur pour générer une instance de clipboardItem. Il accepte un objet comme paramètre. Le nom de clé de l’objet est le type MIME des données et la valeur de la clé est les données elles-mêmes. L’exemple suivant consiste à écrire la valeur du même élément de clip dans plusieurs formats dans le presse-papiers, l’un étant des données texte et l’autre des données binaires à coller à différentes occasions.
