无法执行共享＆＃x27;在＆＃x27; Navigator＆＃x27;：较早的份额尚未完成

Question

我刚刚看到我网站上的一些用户遇到了此错误

InvalidStateError：无法在“Navigator”上执行“共享”：之前的共享尚未完成。

这部分代码发生这种情况：

if(navigator.share) {
  navigator.share({
    url: 'https://www.example.com',
  });
}

MDN 网站< /a> 甚至没有提及此错误的可能性。

我看到错误来自 Windows、Android 和 Chrome 操作系统的 Chrome 浏览器。我发现 mac 上的 chrome 目前没有共享功能。值得一提的是，这个问题很少发生。我尝试通过多次快速单击共享、限制 CPU 和网络、取消共享来重现它，但我始终无法让它抛出此错误。

有谁知道如何触发此错误或看过有关它的任何文档？

Answer 1

最初，我认为如果您不try...catch share() 操作并放弃第一次共享，就会发生这种情况。事实似乎并非如此。我现在打开了 Chromium bug 来查看问题所在。

Answer 2

关于

有人知道如何触发此错误[...]？

您可以通过以下方式触发它：

1. 启动一个网络归档
2. 放弃它（单击其他任何地方）
3. 再次启动网络藏品，而无需刷新Edge和Chrome（MacOS）的页面

Answer 3

这里的问题是您正在使用API​​，就好像它是同步的（例如alert，stript ，或escresence）您应该在再次致电之前等待结果，因为对话框实际上是模态，而无需强制执行JavaScript引擎以与以前命名的API一样暂停。

因此，如果您使用现代代码，请执行等待Navigator.share（{title，url}）;，因此您让用户在打开新的份额之前总结了先前的共享（如果您的代码是触发此代码的代码路径），或创建本地状态，说模态是打开的，并且在解决方案之前，请勿再次调用API（通过其。然后或或.catch callbacks）。

为了重复您的问题，您可以在Chrome DevTools中发出此问题：

navigator.share({ title: "hi!", url: location.href }); navigator.share({ title: "ho!", url: location.href }).then(ok => console.log("ok!", ok), nok => console.error("failed: nok", window.nok = nok));

…如果要进一步检查，第二个通话将在您的全局窗口对象上放置nok拒绝对象。

您可能想构建代码的内容（如果这是由可以在对话框打开时多次触发的东西来调用的）是：

let sharing = false;
if (navigator.share && !sharing)
  sharing = true;
  navigator.share({
    url: 'https://www.example.com',
  }).then(() => {
    sharing = false;
  }).catch((e) => {
    alert(`Error: ${error}`);
    sharing = false;
  });
}

Answer 4

在 yout iframe 中添加 allow="web-share"，例如

<iframe src="google.com" allow="web-share">