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

Question

I have a call to window.open with _blank, and it works in all browsers except on iOS. In my web app, when I click the button to Add to Cart on an iOS device, nothing happens at all, whereas in all other browsers, a new window opens.

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

I found this question and answer, which seems to be the same problem - but I am new to Javascript and not exactly sure how to implement it: window.open(url, '_blank'); not working on iMac/Safari

So my first question is, am I right in thinking the question and answer I just mentioned could be the same problem? My second question is, if I were to try to implement the solution as mentioned in the previous question, would I modify the existing function or would it be separate? Where would I set window.open()? Could someone explain what "myService" is exactly? Thank you for your help.

Micromillimeter

Yes it could be, especially if the code before it is executing. – Herpetology

you want to open the link in a new window? – Cimbalom

Answer 1

I haven't tried this before, but implementing the solution from the SO answer would look like this:

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

In the other post, myService is a non-existent, example service that returns a URL.

Tarn

Answer 2

For this, you need to bind the URL to elements onclick event .

Please follow the code. add this button in your 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>

Replace your link in onclick event. Now trigger the click event using javascript.

Change window.open(C_LINK, '_blank');

to

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

REFERENCE

Cimbalom

Thank you - I appreciate seeing this as well. – Micromillimeter

Answer 3

This is how I got it worked on my React App.
The only way to do it using the onClick Handler. In my usecase, I was needing to fetch the URL through an API call. Safari blocks the window.open() if there's anything else happening inside the onClick.

The workaround I did is to use a state to manage my URL, dynamically update it based on other dependencies with the help of useEffet(). And keep the URL always updated, so once the button is clicked. It always gives the updated URL from the State.

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

Thee were my states.

useEffect(() => {

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

This useEffect() makes sure the URL is always updated.

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

Finally, the button that consumes it.

Cavatina

Answer 4

To get success on iOS safari, I open a modal with a plain link that has target="_blank" set.

Conjecture