Maison interface Web tutoriel CSS Sur l'API de partage Web

Sur l'API de partage Web

Apr 02, 2025 am 02:21 AM

Sur l'API de partage Web

L'API de partage Web est géniale! (Voir notre rapport). Autrement dit, il profite des capacités de partage natives de votre plateforme (si la plate-forme le prend en charge).

Je l'aime bien mieux que les autres méthodes:

Pourquoi?

  • L'API de partage Web ne nécessite que quelques lignes de code et est très simple! Il n'y a pas besoin d'images, de longs JavaScript ou d'IFRames, et il n'y a aucun risque d'être dépassé (ahem, google).
  • L'interface utilisateur que les utilisateurs voient seront personnalisées en fonction de leur plate-forme et peuvent même être personnalisées par les utilisateurs eux-mêmes, y compris ce qu'ils veulent.

Bonnes normes Web!

Mais toutes les plates-formes ne le soutiennent pas. Par exemple, j'écris ce billet de blog dans Chrome et cela ne fonctionne pas dans Desktop Chrome, mais il le fait dans Desktop Safari!

Donc, si je vais l'utiliser, je préfère tester la situation de support avant de mettre le bouton sur la page. C'est très facile:

 if (navigator.share) {
  // code ici}
Copier après la connexion

Voici un exemple, si l'API est prise en charge, j'ajouterais un bouton au message:

Ce code JavaScript sera un peu traité, obtenant le titre et le premier paragraphe de l'article à utiliser dans l'API. J'aime la façon dont Jeremy Keith le gère au niveau de la page:

 if (navigator.share) {
  Navigator.share ({
    Titre: document.QuerySelector ('Title'). TextContent,
    Texte: document.QuerySelect
    URL: document.QuerySelector ('link [rel = "canonical"]'). getAttribute ('href')
  });
}
Copier après la connexion

Vous pouvez également transmettre des chaînes directement à ces valeurs. Cela montre simplement comment faire les choses dynamiquement sur n'importe quelle page.

Jeremy a également plaidé pour une version JavaScript en option de l'API WEB SHARE, qui, selon lui, peut fonctionner comme ceci:

 <button onclick="navigator.share(...)">Partager</button>
Copier après la connexion

Ensuite, utilisé pour spécifier le titre et le texte:

 <button data-title="..." data-text="...">Partager</button>
Copier après la connexion

Je pense que c'est un peu étrange, en utilisant des virgules. Et si le titre contient une virgule? Et si vous spécifiez une URL? Pouvons-nous tous les diviser en propriétés? Je pense que je sais ce que Jeremy dirait: c'est une version déclarative simple. Si vous souhaitez modifier le comportement par défaut, c'est à cela que sert JavaScript.

Mais, devrait-il exister si le navigateur ne le soutient pas? Bien sûr, si vous utilisez Polyfill:

Ce polyfill transformera le bouton en un e-mail: expérience sans support. C'est très intelligent. Je pense que si je suis dans un environnement de production, je n'ajouterais probablement les boutons que si la fonctionnalité est vraiment prise en charge.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Vous avez un jeu croisé?
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Travailler avec GraphQL Caching Travailler avec GraphQL Caching Mar 19, 2025 am 09:36 AM

Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou

Construire une application Ethereum à l'aide de Redwood.js et de la faune Construire une application Ethereum à l'aide de Redwood.js et de la faune Mar 28, 2025 am 09:18 AM

Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum

Créer votre propre bragdoc avec Eleventy Créer votre propre bragdoc avec Eleventy Mar 18, 2025 am 11:23 AM

Quelle que soit le stade dans lequel vous vous trouvez en tant que développeur, les tâches que nous effectuons - qu'elles soient grandes ou petites - ont un impact énorme dans notre croissance personnelle et professionnelle.

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.

Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur? Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur? Apr 02, 2025 pm 06:17 PM

J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.

Un peu sur CI / CD Un peu sur CI / CD Apr 02, 2025 pm 06:21 PM

Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:

Cartes empilées avec un positionnement collant et une pincée de sass Cartes empilées avec un positionnement collant et une pincée de sass Apr 03, 2025 am 10:30 AM

L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.

Comparaison des navigateurs pour une conception réactive Comparaison des navigateurs pour une conception réactive Apr 02, 2025 pm 06:25 PM

Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire

See all articles