window.open('', '_blank') 仅在 iOS 上不打开新标签页

Question

我用 _blank 调用了 window.open，它适用于除 iOS 以外的所有浏览器。在我的网络应用程序中，当我在 iOS 设备上单击“添加到购物车”按钮时，什么也没有发生，而在所有其他浏览器中，都会打开一个新的 window。

const addProducts = (products) => {
    setProductsAdded(false);
    cService
      .add(products)
      .then(() => {
        setLoading(null);
        setProductsAdded(true);
        window.open(C_LINK, '_blank');
      })
      .catch(() => {
        setError('Error');
      });
  };

我发现了这个问题和答案，这似乎是同一个问题 - 但我是 Javascript 的新手，不确定如何实施它：window.open(url, '_blank'); not working on iMac/Safari

所以我的第一个问题是，我认为我刚才提到的问题和答案可能是同一个问题是对的吗？我的第二个问题是，如果我要尝试实施上一个问题中提到的解决方案，我会修改现有功能还是将其分开？我应该在哪里设置 window.open()？有人可以解释一下 "myService" 到底是什么吗？感谢您的帮助。

Answer 1

我以前没有尝试过，但是从 SO 答案中实施解决方案如下所示：

// Open a new window and save a reference to it
var newWindow = window.open();

const addProducts = (products) => {
    setProductsAdded(false);
    cService
      .add(products)
      .then(() => {
        setLoading(null);
        setProductsAdded(true);

        // Set the URL of the new window
        newWindow.location = C_LINK;
      })
      .catch(() => {
        setError('Error');
      });
  };

在另一个 post 中，myService 是一个不存在的示例服务 returns URL。

Answer 2

为此，您需要将 URL 绑定到元素的 onclick 事件。

请看代码。在您的 HTML.

中添加此按钮

<button class='btn' id="btnClick" onclick='window.open("https://www.google.com", "_blank");' style='position: absolute;top: 0;display: none'>Open Google search</button>

在 onclick 事件中替换您的 link。现在使用 javascript 触发点击事件。

改变window.open(C_LINK, '_blank');

到

document.getElementById("btnClick").click()

REFERENCE

Answer 3

这就是我在 React 应用程序.
上运行它的方式使用 onClick 处理程序的唯一方法。在我的用例中，我需要通过 API 调用获取 URL。如果 onClick 内部发生任何其他事情，Safari 会阻止 window.open()。

我所做的解决方法是使用状态来管理我的 URL，借助 useEffet() 根据其他依赖项动态更新它。并保持 URL 始终更新，因此一旦单击按钮。它总是提供来自州的更新 URL。

const [cart, setCart] = useFetchCart();
const [checkoutLoading, setcheckoutLoading] = useState(false);

你是我的状态。

useEffect(() => {

const updateCheckoutURL = async () => {
  setcheckoutLoading(true);
  const newCheckoutURL = await helpers.shop.checkout(cart);
  setCheckoutURL(newCheckoutURL);
  setcheckoutLoading(false);
}
updateCheckoutURL();
}, [cart]);

这个 useEffect() 确保 URL 总是更新。

checkoutLoading ? <Spinner size={20} /> : <button onClick={() => { window.open(checkoutURL) }} className="checkoutButton">Checkout</button>

最后是使用它的按钮。

window.open('', '_blank') 仅在 iOS 上不打开新标签页

window.open('', '_blank') doesn't open new tab on iOS only

javascript

mobile-safari

ios