NotAllowedError：必须处理用户手势才能执行共享请求。 navigator.share答案

【问题标题】：NotAllowedError: Must be handling a user gesture to perform a share request. navigator.shareNotAllowedError：必须处理用户手势才能执行共享请求。 navigator.share
【发布时间】：2019-05-14 18:45:01
【问题描述】：

我有一个简单的页面，其中包含我通过 AJAX 请求处理的一些详细信息。在 AJAX 调用成功回调时，我试图触发 navigator.share，这给了我一个错误：

NotAllowedError：必须处理用户手势才能执行共享请求。

一些示例代码如下所示：

$("#form-button").on('click', function (event) {
  var ele = $(this);
  event.preventDefault();
  $.ajax({
    // ...
    dataType: "json",
    data: { "foo": "bar" },
    success: function (response) {
      if (navigator.share) {
        navigator.share({
          title: response.text,
          text: response.text,
          url: response.href
        }).then(function () {
          alert('Successful share')
        }).catch(function (error) {
          alert('Error sharing: ' + error);
        });
      }
    },
  });
});

来自Google developer site的吴婷说：

...您只能调用 API 以响应用户操作，例如点击（例如，您不能在页面加载过程中调用 navigator.share）

如果我没有 AJAX 调用并在点击事件下直接触发 navigator.share 时它可以工作，但当我将其放入 AJAX 回调时则不会。我希望 API 会检查事件链。

我必须使用哪些替代方法才能使其发挥作用？我试过保留一个虚拟按钮并触发点击。

【问题讨论】：

你找到解决办法了吗？我在角度方面面临同样的问题。

标签： jquery google-chrome share mobile-chrome

【解决方案1】：

Chromium 目前似乎针对被拒绝的数据类型显示错误消息，例如尝试共享 pdf 文件；也不允许共享 JSON 文件。

Chromium 拒绝“共享”的其他情况也可能会给您同样的错误消息。例如，在我的情况下，我在本地进行测试（file://...）或使用“http”而不是“https”。

查看我在其中找到此信息的这条推文： https://twitter.com/daviddalbusco/status/1344641231184396288

还有允许的文件扩展名列表： https://docs.google.com/document/d/1tKPkHA5nnJtmh2TgqWmGSREUzXgMUFDL6yMdVZHqUsg/

[编辑] 我确认相同的代码在移动版 Chrome 上运行良好，但在桌面版 Chrome 89 上运行失败，原因如下：

如果我在调试器中选中“捕获异常时暂停”，我会收到错误消息：“DOMException: 无法在 'Navigator' 上执行 'share': 必须处理用户手势才能执行共享请求。”
如果我不选中“捕获异常时暂停”，我会得到几秒钟的“延迟”，然后承诺会失败并出现错误“DOMException: Share cancelled”。

简而言之，我的回答是：“Chrome 桌面 89 还没有为 Web Share API 做好准备”（如果你尝试，它会给你误导性的错误消息）。

【讨论】：

我正在分享一个gif文件，我认为它与事件传播有关，以前的必须是点击事件。
@BipulJain 我看不到你的 GIF。你在哪个浏览器上尝试这个？我今天正在尝试使用 Chrome 89.0.4389.114，但运行不正常。几秒钟的“滞后”，然后它就失败了。尝试来自 MDN 的测试页面 mdn.github.io/dom-examples/web-share 如果这在您的浏览器中不起作用，这意味着您的问题与 AJAX 无关（或者与点击事件相比，您在哪里调用“共享”API 等）

【解决方案2】：

我有同样的问题。当我调试我的前端代码以检查浏览器中的错误时，我遇到了这个错误。我刚刚删除了浏览器中的断点，现在可以正常工作了。

【讨论】：