标签: web-share

我正在尝试通过网络共享像本机应用程序一样的图像。我也在使用Angular。我使用了网络共享 API。这在 Android 上正常工作，但是在 iOS（Safari 和 Chrome）中会引发错误。我正在使用共享按钮来触发它。

这是我的代码：

if (
      this.windowNavigator.canShare &&
      this.windowNavigator.canShare({ files: [file] })
    ) {
      this.windowNavigator
        .share({
          files: [file],
          title: "Vacation Pictures",
          text: "Photos from September 27 to October 14.",
        })
        .then(() => console.log("Share was successful."))
        .catch((error) => console.log("Sharing failed", error));
    } else {
      console.error("Cannot use Web Share API");
    }

我收到的错误是： Cannot use Web Share API

如果浏览器不受支持，通常会发生这种情况。但是，根据https://caniuse.com/#search=web%20share，iOS 上支持 Safari 13。请注意，我尝试将导航器对象记录到控制台，并且它确实具有 share() 原型。我在 HTTPS 服务器上运行它。请指导我如何进行。

还有其他人遇到过这个问题吗？我正在实现 Web Share API，以将共享按钮添加到页面上的多个列表中。该代码最初似乎工作正常，因为我可以单击任何“共享”按钮，对话框将正确显示。

但是，如果我关闭该对话框并尝试再次单击它，则会收到一条错误消息，提示“当前上下文中的用户代理或平台不允许该请求，可能是因为用户拒绝了权限。”

更奇怪的是，我在所有这些关于如何实现 Web Share API 的教程网站上都遇到了同样的行为（例如： https: //alligator.io/js/web-share-api/ - 尝试单击“分享我！”）在 iOS Safari 上，多次在页面中间放置“按钮。）

这是我的代码供参考：

const shareButtons = document.querySelectorAll('.share');

for (const button of shareButtons) {
    button.addEventListener("click", async () => {
        if (navigator.share) {
            try {
                await navigator.share({ 
                    url: button.getAttribute('data-url')
                });
            } catch (err) {
                  alert(err.message);
            }
        } else {
            // fallback
        }
    });
}

感谢我对此的任何见解 - 非常感谢

MDN 上有一个带有 Webshare API 的示例：https : //mdn.github.io/dom-examples/web-share/

在我的 iOS 设备（iPhone 7 / iOS 14.0 / Safari）上，它只能正常工作一次。第二次抛出权限错误：

错误：NotAllowedError：当前上下文中用户代理或平台不允许该请求，可能是因为用户拒绝了权限。

以下是重现的所有步骤：

1. 去这里
2. 点击“分享 MDN！” 按钮
3. 选择建议选项之一或关闭共享弹出窗口
4. 点击“分享 MDN！” 再按一次
5. 查看错误

你有什么建议如何解决这个问题吗？这是一个已知的错误吗？

下面的代码在支持 Web 共享 API 的设备上运行良好，并显示本机共享对话框，但会出现“未捕获（承诺）DOMException：共享已取消”错误，其中不支持 Web 共享 API，并且不会转到 href 中定义的 URL锚标签。

<a href="https://example.com?utm_source=btn_share" class="btn-share" target="_blank">
    Share on Facebook
</a>


<script type="text/javascript">
    $(".btn-share").click(function(e){
        // Web Share API
        if (navigator.share){
            e.preventDefault();
            navigator.share({
                title: 'This is example website',
                url: 'https://example.com'
            });
        }
    });
</script>

删除错误，以便如果设备不支持 Web 共享 API，它应该转到锚标记的 href 中定义的 URL。

在我的 Nuxt PWA 中，我有一个函数可以使用这个包将 HTML 转换为 Canvas 。生成的图像采用 64 进制。现在我希望能够通过以下方式共享该图像：Whatsapp、Facebook、电子邮件、Instagram 等。我找到了几个软件包，但它们似乎都不支持仅共享文件 URL 和文本。

这是我的分享功能：

shareTicket(index) {
  html2canvas(this.$refs['ticket-' + index][0], {
    backgroundColor: '#efefef',
    useCORS: true, // if the contents of screenshots, there are images, there may be a case of cross-domain, add this parameter, the cross-domain file to solve the problem
  }).then((canvas) => {
    let url = canvas.toDataURL('image/png') // finally produced image url

    if (navigator.share) {
      navigator.share({
        title: 'Title to be shared',
        text: 'Text to be shared',
        url: this.url,
      }) …

我尝试使用 WebShare API 在 iOS 和 Android 中共享图像。在 Android 中，我的代码运行良好，但在 iOS 中，在 WhatsApp 等某些应用程序中，不共享图像，仅共享 URL。在电子邮件等一些应用程序中，它可以正常工作。我添加了一些代码来防止在 iOS 中共享除图像之外的任何其他内容，如下所示：

let data = IS_SAFARI ? { files: [], text: '', url: '', title: '' } : { files: [], text: text, url: URL, title: TITLE };

但它仍然不显示图像，它只共享一个 URL：

let data = IS_SAFARI ? { files: [], text: '', url: '', title: '' } : { files: [], text: text, url: URL, title: TITLE };

const URL = 'https://upload.wikimedia.org/wikipedia/commons/2/27/Map_of_Spain_1490.jpg';
const TYPE = 'image/jpeg';
const …

如何<img src="example.jpg">使用 web share api 与源共享图像。这是我的代码不起作用

let file = "https://tukarjual.com/images/ads/all-category.jpg"
        let filesArray = [file]

        if (navigator.canShare && navigator.canShare({ files: filesArray })) {
            await navigator.share({
                files   : filesArray,
                title   : 'Layanan TukarJual',
                text    : 'Ayo dukung karya putra daerah Kotabaru dengan belanja online di TukarJual',
                url     : 'https://tukarjual.com'
            })
        }

对于我正在构建的网络应用程序，我需要集成文件共享功能。自 iOS 15 发布以来，这终于成为可能。然而，我只让它部分工作。当我通过电子邮件或消息共享文件时，它工作正常。但当我尝试与 Whatsapp、Signal 或 Threema 共享时，它只会共享标题，而不共享实际文件。我在控制台中没有看到任何错误，也没有看到任何失败的网络请求。

    const audioResponse = await fetch(sound.downloadUrl);
    
    const fileBuffer = await audioResponse.arrayBuffer();
    const fileArray = [
      new File([fileBuffer], name + '.mp3', {
        type: 'audio/mpeg',
        lastModified: Date.now(),
      }),
    ];
    if (
      window.navigator.canShare &&
      window.navigator.canShare({ files: fileArray })
    ) {
      navigator
        .share({
          files: fileArray,
          title: name,
          text: 'File share test',
        })
        .then(() => {
          console.log('Success!');
        })
        .catch(console.error);
    }

我不确定我在这里做错了什么，我认为这个Web Share API应该有更多文档或更好的错误描述。

我正在尝试共享以下文件

{\n  lastModified: 1622843015507\n  lastModifiedDate: Fri Jun 04 2021 16:43:35 GMT-0500 (Eastern Standard Time) {}\n  name: "60b1d17b7f2cd71c8307fae2"\n  size: 37835\n  type: "image/png"\n  webkitRelativePath: ""\n}\n

使用

await navigator.share({\n    text: \'TEST\',\n    files: [file],\n  });\n

我已确保该类型是允许的类型，但我不断收到DOMException: Permission denied. 我真的不明白\xe2\x80\x99不明白我应该寻找什么。