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

Question

我使用了window.open方法并指定了_blank参数，在所有浏览器中都可以正常工作，但在iOS上无法正常工作。在我的Web应用程序中，当我在iOS设备上单击“添加到购物车”按钮时，什么也不会发生，而在其他所有浏览器中，都会打开一个新窗口。

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”到底是什么？谢谢您的帮助。

- B. Bailey

---

是的，特别是如果它之前的代码正在执行。 - ABGR

您想在新窗口中打开链接吗？ - sibabrat swain

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');
      });
  };

在另一篇文章中，myService是一个不存在的示例服务，其返回一个URL。

- Ed Lucas

Answer 2

这是我在我的React应用中让它工作的方法。
唯一的方法是使用onClick处理程序。在我的用例中，我需要通过API调用获取URL。如果在onClick内部有其他操作，Safari会阻止window.open()的执行。

我采用的解决方法是使用状态来管理我的URL，并根据其他依赖项动态更新它，借助useEffect()的帮助。并且始终保持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>

最后，消耗它的按钮。

- Harish

Answer 3

为了在iOS Safari上获得成功，我使用一个带有target="_blank"属性的普通链接来打开一个模态框。

- Justin

Answer 4

为此，您需要将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事件中替换您的链接。现在使用JavaScript触发单击事件。

将window.open(C_LINK, '_blank');更改为

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

参考资料

- sibabrat swain

---

谢谢 - 我也很高兴看到这个。 - B. Bailey