如何从网页上的链接打开本机 iOS 共享模式？答案

【问题标题】：How to open the native iOS share modal from a link on a webpage?如何从网页上的链接打开本机 iOS 共享模式？
【发布时间】：2019-08-26 13:34:35
【问题描述】：

我的网页上有一个share button。我想点击移动 Safari 中的按钮以打开 iOS 原生共享模式。

如何使用 HTML/Javascript 实现这一点？

我可以看到Wall Street Journal 已经能够通过他们网站上的分享按钮实现这一目标。我无法在 Stack Overflow 或 Google 上找到任何答案。

【问题讨论】：

标签： javascript html ios safari mobile-safari

【解决方案1】：

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

也可以在这里查看更多信息https://web.dev/web-share/

【讨论】：

【解决方案2】：

你可以使用功能

navigator.share

但并非所有浏览器都支持它。在这种情况下，您可以使用以下构造进行检查：

if (navigator.share) {
  title: ' ',
  text: ' ',
  url: ' '
} else {
  // Fallback
}

例如使用此代码

   shareButton.addEventListener('click', event => {
      if (navigator.share) {
        navigator.share({
          title: 'WebShare API Demo',
          url: ' '
        }).then(() => {
          console.log('Thanks for sharing!');
        })
        .catch(console.error);
      } else {
        shareDialog.classList.add('is-open');
      }
    });

在哪里

shareDialog.classList.add('is-open'); 它会打开您的备用共享面板。

更多关于原生共享 API 支持和功能的信息你可以阅读there

【讨论】：

【解决方案3】：

你可以试试

navigator.share({
 title: 'Your title',
 text: 'Your text',
 url: 'Your url to share'
})

点击您的链接。

【讨论】：

这可能行也可能行不通，因为 Web Share API 仍然只是浏览器支持有限的提案：github.com/WICG/web-share