Safari 阻止弹出窗口

Posted 2023-03-28

【中文标题】Safari 阻止弹出窗口

【英文标题】：Safari blocking popups

【发布时间】：2020-05-04 14:48:09

【问题描述】：

我有一个 twitter 登录，众所周知，Google 和 Facebook 有自己的 用于打开登录弹出窗口的脚本，它甚至可以在 Safari 上运行，但 twitter 没有。所以我们实现了自己的，我们面临的问题是 ios 设备正在阻止打开的弹出窗口：

 window.open(url, '_blank', 'height=400,width=800,left=250,top=100,resizable=yes', true);

我也试过在阅读后创建一个锚标签（Bypassing popup blocker in safari）：

 <a id="js__twitter__popup-link" target="_blank" style="visibility: hidden;"></a>

然后我们将url添加到href this.twitterPopupLink.setAttribute('href', url)，然后document.querySelector("#js__twitter__popup-link").click()，但在IOS上即使这样也不会打开新页面。

测试人员说，在 iPad 上打开了弹出窗口，但使用 IOS 模拟器时，它没有在 iPad 上为我打开。可以肯定的是，它不会在 iPhone 上打开弹出窗口。

【参考方案1】：

在 IOS 上即使这样也不会打开新页面

正确。弹出窗口阻止程序的目的是防止弹出窗口。您可以想象的任何解决方法，他们可能也已经想象和阻止了。

一般来说，您只能在一种情况下打开弹出窗口 - 在用户发起的点击之后立即打开。通过 javascript 触发点击不会绕过这一点。

【讨论】：

感谢您的回答！我仍然理解，Facebook 和 Google 在没有用户额外点击的情况下以某种方式解决了这个问题。

Facebook 和 Google 的 OAuth 登录按钮都需要用户在 Web SDK 中单击。如果您指的是 iOS SDK，它们将在本机触发它，而不是在 Safari 中。

我们还实现了 Facebook 和 Google 登录，两个额外的按钮，但是一旦你点击按钮，弹出窗口就会打开，现在看来，对于 twitter，我需要让用户点击两次（至少在 IOS 上）。

不，您不需要单击两次。停止尝试伪造点击。制作一个带有onclick 的按钮，该按钮调用您的window.open 代码。它必须是同步的和用户启动的。

twitter 按钮是一个 web 组件，组件监听点击，点击后调用后端使用消费者 API 密钥（存储在配置文件中）获取 twitter 令牌，收到响应后，客户端尝试使用带有参数的 twitter URL 打开 twitter 弹出窗口。