Open URL not functioning as expected on iOS

Hi… I have the following script applied to an object, and it works perfectly on desktop browsers (other than Safari) and it works perfectly on Android, but it doesn’t function at all on any browsers on iOS.

import { IPointerClickHandler, PointerEventData } from "@needle-tools/engine/src/engine-components/ui/PointerEvents";

export class openUrlCartoonfun extends Behaviour implements IPointerClickHandler {

    // Make sure to have an ObjectRaycaster component in the parent hierarchy
    onPointerClick(_args: PointerEventData) {
        console.log("Clicked", this.name);
        window.open("https://www.cartoonfun.co.uk");
    }
}```

Does anyone have any ideas (other than ' 🙄 🙃  Safari' ) as to what the problem might be?

It's not a deal-breaker... but it'd be cool to find out what's wrong and if there's a workaround 😎

[Original Post on Discord](https://discord.com/channels/717429793926283276/1086988693883072634)

*by user 908977119781060648*

Sorry for missing this question!

Can you try

setTimeout(() => {
    window.open('https://www.cartoonfun.co.uk', '_blank');
});

instead of just window.open?

Hi @herbst​:cactus: and many thanks for replying, it’s much appreciated :slightly_smiling_face:

I gave that a go but sadly it didn’t make a difference.

In Safari on desktop, clicking the link in the scene throws a ‘Popup window blocked’ notification in the URL bar (plus an option to click on an icon there to open the requested window). It’s not ideal but at least someone can visit the link in question if they know to click on the icon in the URL bar.

In Safari on iOS, clicking the link in the scene simply doesn’t do anything at all. No notification/explanation. No options to open the requested window. Nothing :neutral_face:

Any ideas and suggestions will be very gratefully received! :slightly_smiling_face:

by user 908977119781060648

Incidentally… I know you’ll already know this but the Needle logo that’s sited in the bottom right hand corner of published scenes works perfectly across all browsers and platforms. When clicked it seamlessly takes users to needle.tools as expected :+1:

So, I was wondering, might it be possible to employ whatever makes that work for other links too (like the one I’m experiencing difficulties with)… and, if so, how might I achieve that? :thought_balloon: :thinking: :thought_balloon:

by user 908977119781060648

This is literally a link element
You can also try this;

let link = document.createElement("a");
link.href = 'https://www.cartoonfun.co.uk';
link.target = '_blank';
// document.body.appendChild(link); // may not be needed
// link.style.visible = 'none';
link.click();

Oooooo, cheers… I’ll see if I can implement that. Many thanks!!!

by user 908977119781060648

Just use it in place of your window.open call! Let me know how it goes :slightly_smiling_face:

:cry: still no joy.

I used this…

import { IPointerClickHandler, PointerEventData } from "@needle-tools/engine/engine-components/ui/PointerEvents";

export class openUrlCartoonfun extends Behaviour implements IPointerClickHandler {

    // Make sure to have an ObjectRaycaster component in the parent hierarchy
    onPointerClick(_args: PointerEventData) {
        console.log("Clicked", this.name);
        let link = document.createElement("a");
        link.href = 'https://www.cartoonfun.co.uk';
        link.target = '_blank';
        // document.body.appendChild(link); // may not be needed
        // link.style.visible = 'none';
        link.click();
        }
}```

... but it still doesn't make any difference. It seems Safari isn't interested in playing nice 🙃

*by user 908977119781060648*

can you uncomment the two lines I had added commented?

just to be sure, you do get the “Clicked” log right? and it works on Android?

Yup, ‘Clicked’ is confirmed… and it works just fine on Android.

Two tics, I’ll uncomment the lines and try again.

Thanks for all your help with this!

by user 908977119781060648

Nope, not a goer. I’m now getting a “Pre Build Script failed” notification and the console says,

“src/scripts/OpenUrlCartoonfun.ts(13,20): error TS2339: Property ‘visible’ does not exist on type ‘CSSStyleDeclaration’.”

Thanks for the suggestions, though. They’re greatly appreciated. Apologies but I’m afraid I’ll have to look at all this again tomorrow as I have to dash off to get some deadline stuff done just at the moment :wave:

by user 908977119781060648

Sorted :sunglasses: :+1:

As it seemed to be the opening of a new window that was causing the problems, I edited window.open('https://www.cartoonfun.co.uk'); to read window.open('https://www.cartoonfun.co.uk', '_self'); and Safari likes it :sweat_smile:

So… this works :point_down:

import { IPointerClickHandler, PointerEventData } from "@needle-tools/engine/src/engine-components/ui/PointerEvents";

export class openUrlCartoonfun extends Behaviour implements IPointerClickHandler {

    // Make sure to have an ObjectRaycaster component in the parent hierarchy
    onPointerClick(_args: PointerEventData) {
        console.log("Clicked", this.name);
        window.open('https://www.cartoonfun.co.uk', '_self');
    }
}```

It's not an ideal solution as users are taken away from the scene content if they visit a link... but it does function so I'm banking that 😅 🙌

*by user 908977119781060648*

Ah nice! So it’s basically Safari’s aggressive popup blocking that prevents it. Good to know, and glad you were able to figure it out!

@herbst🌵 heyo any wait to not have “_self”?

by user 263967078346653697

for safari

by user 263967078346653697

or is self the only way for now

by user 263967078346653697

My understanding is that Safari blocks popups by default and users have to actively allow specific webpages to use popups. So I’d recommend using the above-mentioned approach to avoid your links being blocked by Safari.

got it

by user 263967078346653697

is there any way to check in script or smth

by user 263967078346653697