RequestStorageAccess-如果拒绝访问,则启动弹出窗口

发布时间:2020-07-06 19:23

我正在实现Apple的requestStorageAccess API,以请求跨域iFrame中的cookie访问。

我们遇到的一个问题是,如果不是用户交互的一部分,Safari将阻止弹出窗口,这使整个体验非常不愉快,因为用户需要单击“单击此按钮以查看...”按钮。 >两次,以便在第一方上下文中查看该网站。

流量(如下所示)大致为:

  • 检查我们是否具有cookie读/写访问权限
  • 如果是这样,请从iFrame发送POST请求以加载数据。
  • 如果没有,请显示带有requestStorageAccess单击处理程序的按钮。
  • 如果requestStorageAccess解析为true,请重新加载框架或发送XHR请求。
  • 如果requestStorageAccess解析为false(我们希望在新框架中启动)。 Safari阻止了catch块的window.open调用。我们发现的唯一其他选择是显示一个第二个按钮,要求用户再次单击,以在新窗口中启动。

有更好的方法吗?当requestStorageAccess不能解析为true时,标准的“失败”模式是什么?

enter image description here

回答1

示例代码中似乎有一些错误:

  1. requestStorageAccess()Document界面:document.requestStorageAccess()的一种方法。
  2. then()方法调用缺少右括号。
  3. window.open()中的
  4. url必须用引号引起来:window.open("appointments.html")

这是您的代码,所有错误已更正:

document.requestStorageAccess().then(_=>
{
  // load appointments
}).catch(_=> {
  // launch popup
  window.open("appointments.html");
  // safari blocks this popup since it's part of a promise it is not directly part of a click action...
});

现在,要使此代码正常工作,您需要将弹出式打开代码从catch()移到then()的错误回调中:

document.requestStorageAccess().then(_=> 
{
    // load appointments
}, _ => {
    // launch popup
    window.open("appointments.html");
});

现在,此代码之所以起作用,是因为requestStorageAccess() promise实际上是在处理直接的用户手势(按钮单击)并将其传递到then()回调中。但显然没有进入catch()

requestStorageAccess不能解析为true时,标准的“失败”模式是什么?

我建议您阅读官方Introducing Storage Access API博客文章。