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

Question

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

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

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

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

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

提前致谢。

Answer 1

有可能大获全胜。目前仅适用于 Android 版 Chrome、Samsung Internet 和 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

Answer 2

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

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

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改用它。

Answer 3

2013 年 4 月 10 日回答

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

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

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

Answer 4

现在可以使用Web 共享 API！

但是，它尚未得到广泛支持。目前，它仅在 Safari（移动和桌面）和 Android 版 Chrome 中可用。有关详细信息，请参阅我可以使用。

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

• 您的页面需要通过 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());

_{*：请根据您的用例考虑使用更合适的后备方案（例如社交分享）。}

Answer 5

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

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

${content}`;

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

Answer 6

您可以使用 Android 的WebView.addJavascriptInterface()方法。

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