Web Share APIで

Web Share APIは素晴らしいです！ （レポートを参照）。簡単に言えば、プラットフォームのネイティブ共有機能を利用します（プラットフォームがサポートしている場合）。

私はそれが他の方法よりもはるかに好きです：

なぜ？

• Web Share APIには数行のコードのみが必要であり、非常に簡単です！画像、長いJavaScriptまたはIframesの必要はなく、時代遅れになるリスクはありません（Ahem、Google）。
• ユーザーが表示するUIは、プラットフォームに従ってカスタマイズされ、ユーザー自身が望むものを含め、ユーザー自身によってカスタマイズされる場合があります。

良いウェブ標準！

しかし、すべてのプラットフォームがそれをサポートするわけではありません。たとえば、私はこのブログ投稿をChromeで書いていますが、デスクトップChromeでは機能しませんが、デスクトップSafariで機能します。

したがって、使用する場合は、ページにボタンを置く前にサポートの状況をテストしたいと思います。これはとても簡単です：

 if（navigator.share）{
  //ここにコード}

これが例です。APIがサポートされている場合、投稿にボタンを追加します。

このJavaScriptコードは少し処理され、APIで使用する記事のタイトルと最初の段落を取得します。私はジェレミー・キースがページレベルでそれを処理する方法が好きです：

 if（navigator.share）{
  navigator.share（{
    タイトル：document.queryselector（ 'title'）。textcontent、
    テキスト：document.queryselector（ 'meta [name = "description"]'）。getattribute（ 'content'）、
    url：document.queryselector（ 'link [rel = "canonical"]'）。getattribute（ 'href'）
  }）;
}

また、これらの値に文字列を直接渡すこともできます。これは、任意のページで動的に物事を行う方法を示しています。

ジェレミーはまた、Web Share APIのオプションのJavaScriptバージョンを提唱しています。

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

次に、タイトルとテキストを指定するために使用されます。

<button data-title="..." data-text="...">共有</button>

コンマを使用して、これは少し奇妙だと思います。タイトルにコンマが含まれている場合はどうなりますか？では、URLを指定した場合はどうなりますか？それらをすべてプロパティに分割できますか？私はジェレミーが言うことを知っていると思います：これは単純な宣言バージョンです。デフォルトの動作を変更したい場合、これがJavaScriptの目的です。

しかし、ブラウザがそれをサポートしていない場合、それは存在する必要がありますか？もちろん、PolyFillを使用する場合：

このポリフィルは、ボタンをMailTo：Experience Supportに変えます。これはとても賢いです。私が生産環境にいる場合、機能が本当にサポートされている場合にのみ、おそらくボタンを追加すると思います。

以上がWeb Share APIでの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。