Question

我正在尝试在我的测试Web应用程序上实现Web Share Api功能，但似乎无法做到这一点。这是代码：

validates :url_soporte, :url_privacidad, :web_site, :format => {
      :with => /^(http|https):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/ix,
      :message => 'You provided invalid URL'
  }, :allow_blank => true

每次我在iOS上使用Firefox和Safari时，都会收到一条错误消息：

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

如果我尝试在这些浏览器上共享google.com上的内容，则会显示本机对话框来选择要与哪个应用共享。

我不明白为什么。在此页面上，没有关于权限的讨论：https://developers.google.com/web/updates/2016/09/navigator-share

更新：

在Android版Chrome上的

正常工作，而在Android版Firefox上

则不起作用。在Chrome，Firefox和Safari（我相信它们全部使用safari引擎）中，它们只有在我通过const newVariable: any = navigator; {newVariable && newVariable.share && <IconButton aria-label="Share" onClick={async (e) => { try { const id = await shareRepository.shareTrip(this.props.todolist) const url = "https://something.com/share/" + id await newVariable.share({ title: 'Check my todolist for ' + this.props.todolist.trip.departure + ' - ' + this.props.todolist.trip.arrival, text: 'Check my todolist for ' + this.props.todolist.trip.departure + ' - ' + this.props.todolist.trip.arrival, url: url, }) } catch (error) { alert(error) } }}> <ShareIcon /> </IconButton>}时才起作用，这意味着页面本身或""会在我通过{{1}时中断}：/

Answer 1

对于其他将来的用户来说，当前答案过于特定于该代码。根本问题是必须从用户手势调用share()方法。

如果方法调用不是由用户激活触发的，则返回一个拒绝请求，并使用DOMException“ NotAllowedError”拒绝。 From the Web Share API。

用户激活是以下任意一项：

更改
点击
上下文菜单
dblclick
鼠标
pointerup
重置
提交
touchend

Answer 2

我知道问题出在哪里，这真令人讨厌。

所以：

  const id = await shareRepository.shareTrip(this.props.todolist)

此调用引起了问题。如果我发表评论，在iOS上没有问题。

如果我保留它，我在Android上完全没有问题，但iOS会抱怨。

因此，我需要重新考虑应用程序的流程，以从“ onClick”事件外部传递ID。

缺少Web Share API权限

2 个答案: