是否可以在智能手机上触发共享菜单（通过 HTML/JS）？

Posted 2023-05-06

【中文标题】是否可以在智能手机上触发共享菜单（通过 HTML/JS）？

【英文标题】：Is it possible to trigger share menu on smartphones (via HTML/JS)?

【发布时间】：2013-04-02 00:34:04

【问题描述】：

是否有可能通过 html 或 javascript 在智能手机上的本地浏览器中触发共享功能？

当然，有很多服务都提供了分享按钮。但是当我例如想在facebook上分享一个网站，我需要在我当前使用的浏览器中登录facebook。

几乎所有浏览器都内置了自己的共享功能，它会触发系统菜单来选择您要用于共享的应用程序：

这个问题是关于：如何触发这个菜单？

我知道可以在链接的 href 属性中使用指定前缀触发电话呼叫，例如 tel: 或 callto:。也许这个共享菜单的快捷方式也存在？或者一些javascript代码？或者完全不同的方式怎么做？

提前致谢。

【参考方案1】：

有可能有一个很大的收获。目前仅适用于 android 版 Chrome、三星互联网和 Safari（桌面版和移动版）。桌面版 Edge 和 Chrome 即将获得支持http://caniuse.com/#feat=web-share

if (navigator.share) 
  navigator.share(
    title: document.title,
    text: "Hello World",
    url: window.location.href
  )
  .then(() => console.log('Successful share'))
  .catch(error => console.log('Error sharing:', error));

https://developers.google.com/web/updates/2016/10/navigator-share

【参考方案2】：

我添加了这个，因为到 2018 年 7 月 16 日，所有答案似乎都已过时。

有可能，但仅在少数浏览器（MDN Reference）中，通过navigator 中的一种方法 API 实现：

navigator
    .share(
        title: document.title,
        text: 'Hello World',
        url: window.location.href
    )
    .then(() => console.log('Successful share! ?'))
    .catch(err => console.error(err));

谷歌参考：https://developers.google.com/web/updates/2016/10/navigator-share

另外，有一个叫做 Web Intends 的东西是一个死项目，你应该改用navigator.share。

【讨论】：

完美运行！这是有效的答案。

【参考方案3】：

2013 年 4 月 10 日回答

据我所知，移动操作系统上的当前浏览器中没有这样的实现。由于这个问题让我感兴趣 - 谷歌搜索显示正在朝着这个方向开展工作：

https://dvcs.w3.org/hg/web-intents/raw-file/tip/spec/Overview.html http://webintents.org/

抱歉 - 我不知道解决方法。

【参考方案4】：

现在可以使用Web Share API！

但是，它尚未得到广泛支持。目前，它仅在 Safari（移动和桌面）和 Android 版 Chrome 中可用。详情请见Can I Use。

根据 Google Developers 上的Introducing the Web Share API，有几点需要牢记：

您的页面需要通过 HTTPS 提供 您只能调用navigator.share(…) 来响应用户操作，例如点击（即，您不能在页面加载时调用它） 您应该对它进行功能检测，以防它在您的用户平台上不可用（例如，通过 navigator.share !== undefined）

Google Developers 文章还指出，与 Share API 共享的 URL 不必位于您自己的域中 - 您可以共享任何 URL。

将所有这些放在一起，您可以使用类似这样的东西，如果可用则使用 Share API，如果不可用则回退到发送电子邮件^*：

function createShareButton() 
  const btn = document.createElement("button");

  const title = document.title;
  const text = "Check this out!";
  const url = window.location.href;

  btn.innerText = "share" in navigator ? "Share" : "Share via e-mail";

  btn.onclick = () => 
    if (navigator.share !== undefined) 
      navigator
        .share(
          title,
          text,
          url
        )
        .then(() => console.log("Shared!"))
        .catch(err => console.error(err));
     else 
      window.location = `mailto:?subject=$title&body=$text%0A$url`;
    
  ;

  return btn;


document.title = "Demo";
document.body.appendChild(createShareButton());

_{*：请考虑使用更合适的后备方案（例如社交分享），具体取决于您的用例。}

【参考方案5】：

有可能，我写了一个函数来分享和观察异步副作用：

const shareContact = async (title, content) => 
  const text = `$title

$content`;

  try 
    await navigator.share(
      text,
    );
   catch (e) 
    console.log(e);
  
;

【参考方案6】：

你可以使用安卓的WebView.addJavascriptInterface()方法。

首先，您需要编写一个类来触发打开共享菜单的意图 (take a look here)，然后使用 addJavascriptInterface() 调用实现该类。之后，您需要做的就是从您的 Javascript 中调用该方法。

【讨论】：

我不熟悉在 android 上编写应用程序。但这听起来像是在写一个应用程序。