Auf der Web Share -API

Die Web Share -API ist großartig! (Siehe unseren Bericht). Einfach ausgedrückt, nutzt es die nativen Sharing -Funktionen Ihrer Plattform (wenn die Plattform sie unterstützt).

Ich mag es weitaus besser als andere Methoden:

Warum?

• Die Web Share -API erfordert nur wenige Codezeilen und ist sehr einfach! Es besteht keine Notwendigkeit von Bildern, langwierigen JavaScript oder Iframes, und es besteht kein Risiko, veraltet zu sein (ähm, Google).
• Die Benutzeroberfläche, die Benutzer sehen, wird nach ihrer Plattform angepasst und kann sogar von den Benutzern selbst angepasst werden, einschließlich dessen, was sie wollen.

Gute Webstandards!

Aber nicht alle Plattformen unterstützen es. Zum Beispiel schreibe ich diesen Blog -Beitrag in Chrome und er funktioniert nicht in Desktop -Chrome, aber er tut es in Desktop -Safari!

Wenn ich es also benutzen will, würde ich die Support -Situation lieber testen, bevor ich die Schaltfläche auf die Seite setzen würde. Das ist sehr einfach:

 if (navigator.share) {
  // Code hier}

Hier ist ein Beispiel: Wenn die API unterstützt wird, würde ich dem Beitrag eine Schaltfläche hinzufügen:

Dieser JavaScript -Code wird ein wenig verarbeitet und erhält den Titel und den ersten Absatz des Artikels zur Verwendung in der API. Mir gefällt, wie Jeremy Keith es auf der Seitenebene umgeht:

 if (navigator.share) {
  navigator.share ({{{{
    Titel: document.querySelector ('Titel'). TextContent,
    Text: document.querySelector ('meta [name = "Beschreibung"]'). getAtTribute ('Inhalt'),
    URL: document.querySelector ('link [rel = "Canonical"]'). getAtTribute ('href')
  });
}

Sie können auch Strings direkt an diese Werte übergeben. Dies zeigt nur, wie Dinge auf jeder Seite dynamisch erledigt werden.

Jeremy hat sich auch für eine optionale JavaScript -Version der Web Share -API eingesetzt, von der er glaubt, dass sie so funktionieren kann:

 <button onclick="navigator.share(...)">Aktie</button>

Dann verwendet, um den Titel und den Text anzugeben:

 <button data-title="..." data-text="...">Aktie</button>

Ich denke, das ist ein bisschen seltsam und benutzt Kommas. Was ist, wenn der Titel ein Komma enthält? Was ist, wenn Sie eine URL angeben? Können wir sie alle in Eigenschaften aufteilen? Ich glaube, ich weiß, was Jeremy sagen würde: Dies ist eine einfache deklarative Version. Wenn Sie das Standardverhalten ändern möchten, ist JavaScript dafür.

Aber sollte es existieren, wenn der Browser ihn nicht unterstützt? Natürlich, wenn Sie Polyfill verwenden:

Diese Polyfill verwandelt die Taste in ein Mailto: Erfahrung ohne Unterstützung. Das ist sehr klug. Ich denke, wenn ich in einer Produktionsumgebung bin, würde ich wahrscheinlich nur die Tasten hinzufügen, wenn die Funktion wirklich unterstützt wird.

Das obige ist der detaillierte Inhalt vonAuf der Web Share -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!