window.open(url, '_blank'); not working on iMac/Safari

Question

I've build a web page that let's you select a page name from a drop down list and then transfers the browser to that page. The code that does the transfer is

if (url){
    window.open(url, '_blank');
}

where "url" is the page selected.

A console log just before the window.open line prints something like:

    executing: window.open('http://www.mywebsite.com/44/threats.html', '_blank')

and then the browsers opens the page in a new tab.

This works fine on Windows 7 for all the browsers, including Safari.

On an iMac it works for Firefox but not for Safari.

Does anyone know why iMac/Safari won't do this?

score 282 · Answer 1 · answered Sep 08 '16 at 09:39

282

Safari is blocking any call to window.open() which is made inside an async call.

The solution that I found to this problem is to call window.open before making an asnyc call and set the location when the promise resolves.

var windowReference = window.open();

myService.getUrl().then(function(url) {
     windowReference.location = url;
});

answered Sep 08 '16 at 09:39

Jeff Victorino

2,891
1
11
7

11

I using trying to use window.open in the success method for a jquery $.ajax call when async is set to true. Safari would ignore window.open. Changing jquery $.ajax call to async: false allowed window.open to work. – Rich Wagenknecht Feb 01 '17 at 20:09
15

This identifies the problem, the cause of the problem, and a workaround. This should be the selected answer. – Chris Foster Apr 29 '17 at 00:59
@RichWagenknecht answer was my solution. Thanks! – Matias Seguel Nov 14 '17 at 03:00
4

Instead of window.open, window.open("about:blank","_blank") worked for me – Shrabanee Mar 09 '18 at 07:35
4

how can this be used where does myService come from? – Silve2611 May 17 '19 at 09:22
1

@Silve2611 myService is some async functionality is using to get the url to redirect. – Alejandro Cumpa Jul 06 '19 at 01:31
Perfect solution works good in chrome, firefox and mac safari. – Tech Yogesh Oct 15 '19 at 14:18
1

In my case the url was a string and not of type location so i had to use windowReference.location.assign(url) – troYman Oct 17 '19 at 09:57
Opening a new tab in Safari on iOS just works from an async function, just make sure you create the window (`window.open`) before calling the async call – yooouuri Oct 22 '19 at 09:17
This works in both desktop browsers and iOS Safari. Thanks for sharing. – Ryan Griggs Oct 15 '20 at 15:02
6

It's worth noting that, if for whatever reason, you don't want the window to open when the promise resolves, you can call `windowReference.close()` to immediately close it. – Jonathan Feb 02 '21 at 21:44
THX for that hint – Andre Aus B Mar 16 '21 at 10:23
Thank you for this, very clearly makes sense. – dvoutt Apr 17 '21 at 04:11
Does not work in Ionic for anyone looking for a that. – MadMac Dec 06 '21 at 05:38

score 48 · Answer 2 · answered Dec 23 '21 at 15:09

48

Using setTimeout

Wrapping your window.open(url, '_blank') line of code in the async function with a setTimeout works as well,

setTimeout(() => {
    window.open(url, '_blank');
})

setTimeout code runs on the main thread, instead of the asynchronous one. Tested in Chrome and Safari.

answered Dec 23 '21 at 15:09

Miguel Stevens

8,631
18
66
125

Cool workaround! Solved the issue on iPhone Safari for me. And thanks for the explanation. – HedeH Jun 23 '22 at 10:56
1

UPDATE - `target="_blank"` stopped working for me. Had to use `target="_top"` – HedeH Aug 10 '22 at 15:30
3

This answer is under valued! Thanks! – Adam Liu Aug 25 '22 at 05:35
This saved me after hours of mind-bending debugging. I have no idea how you'd even arrive at this solution without diving into the browser code. Thanks!! – vaZark Sep 30 '22 at 09:57
why is this required for window.open to work? – Joe Berg Nov 16 '22 at 20:56
@JoeBerg It's written in the answer above, Safari blocks all window.open requests if that request is made from an async call, using this method (setTimeout) we force the browser to run window.open on the main thread. – Miguel Stevens Nov 17 '22 at 04:46
Can someone confirm this still works in latest Safari? I can't get it to work. – iuliu.net Mar 14 '23 at 15:47
Doesn't work for me. – Paul Serre May 30 '23 at 13:21
Didn't work for me either... – Valera Tumash Jun 23 '23 at 08:16
Still doesn't work on iOS 16.6 – Jaye Hernandez Aug 29 '23 at 14:58

user2704238 · Answer 3 · 2018-11-19T17:23:10.710

24

To use window.open() in safari you must put it in an element's onclick event attribute.

For example: <button class='btn' onclick='window.open("https://www.google.com", "_blank");'>Open Google search</button>

edited Nov 19 '18 at 17:23

answered Jun 20 '14 at 12:29

user2704238

495
4
7

3

The OP has a more complicated construction, so this answer might not be the solution for him. But for normal constructions this indeed does the trick. At least on iOS 11.3, Safari with default settings. If you put `window.open` in a function and call the function with `onclick`, Safari will not open a new tab. The function must be inside the to click element. A minor correction to the answer: ``. – Frank Conijn - Support Ukraine Apr 24 '18 at 15:37
@FrankConijn Thank you for your clarification and your correct. I have made the edit in my post to reflect your correction. – user2704238 Nov 19 '18 at 17:24
May i add : "Never use " There is a subsection with THAT title on the `window.open` docs on https://developer.mozilla.org/en-US/docs/Web/API/Window/open. Seems pretty clear. – Nebulosar Jun 25 '20 at 12:39

score 22 · Answer 4 · edited Jul 30 '20 at 10:42

22

You can't rely on window.open because browsers may have different policies. I had the same issue and I used the code below instead.

let a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = <your_url>;
a.download = <your_fileName>;
a.click();
document.body.removeChild(a);

edited Jul 30 '20 at 10:42

David Buck

3,752
35
31
35

answered Jul 30 '20 at 10:12

Abreham

425
1
4
14

1

this also does not include the "_blank" (new tab) – Smern Oct 01 '20 at 20:37
1

@Dallas I guess you could add the attribute `target` in the process to have it behave as OP intended. – Adrien Nov 02 '20 at 06:53
8

adding `target` attribute and setting it as `_blank` breaks this again, safari will block it as a pop-up – mrben522 Dec 14 '20 at 14:52
This should be an accepted answer. Thanks. – Arunjith R S Mar 23 '21 at 09:21

score 14 · Answer 5 · edited Aug 29 '18 at 02:52

14

window.location.assign(url) this fixs the window.open(url) issue in ios devices

edited Aug 29 '18 at 02:52

Stephen Rauch

47,830
31
106
135

answered Aug 29 '18 at 02:34

sama vamsi

197
1
4

8

This causes the `url` to be opened in the current tab, not in a new tab (as specified in the question). – Jon Schneider Jan 17 '19 at 16:19
Yup. This worked for me after fidgeting around a bit. I was trying to capture onScroll in an iPhone and it wasn't working though it was working on Safari in general. Thanks man. – anotherDev Feb 05 '20 at 06:13
@JonSchneider It causes to open in the current tab because it is assigned to `window`. Besides that, assigning the `url` works better in the senario where your `url` is a `String` type – Nebulosar Jun 25 '20 at 12:43
Its working For ME. I don't need a popup window. Just need to open url. Thank you so much... – Bala Murugan Jul 14 '20 at 09:47
I wanna add a comment that this also works when you would like to download some images or documents from a certain url. – Ezrqn Kemboi Dec 23 '20 at 07:19

score 13 · Answer 6 · edited May 24 '21 at 11:51

13

Taken from the accepted answers comment by Steve on Dec 20, 2013:

Actually, there's a very easy way to do it: just click off "Block popup windows" in the iMac/Safari browser and it does what I want.

To clarify, when running Safari on Mac OS X El Capitan:

Safari -> Preferences
Security -> Uncheck 'Block pop-up windows'

edited May 24 '21 at 11:51

oguz ismail

1
16
47
69

answered Jul 03 '16 at 14:33

jnrcorp

1,905
1
18
25

55

but you cannot block customers' popup windows – xiaoyu2er May 18 '17 at 00:53
1

@madd I think the point is that you need to go back to your designer and figure out how to solve the need without popping open a new window via JS or use a traditional `href`. The reason this answer is here is to alert people that browsers are making it more difficult to open popups. – jnrcorp Jun 15 '21 at 12:25
1

Downside: On IPads there does not seem to be a way to generally accept popups for a certain website so you have to confirm that you really want to open the popup every single time. – René Jul 15 '21 at 07:34

score 7 · Answer 7 · answered May 20 '21 at 06:26

7

Open link in a new tab, programatically with JavaScript for: safari, mobile safari and other browsers:

const link = 'https://google.com';

const a = document.createElement("a");
a.setAttribute('href', link);
a.setAttribute('target', '_blank');
a.click();

answered May 20 '21 at 06:26

Sergii

1,643
1
14
9

1

This trick doesn't work in safari ios. – liberborn Jul 27 '22 at 11:48
@liberborn, just checked on safari ios (iPhone) and it works. You need to add something like this: const onClickHandler = () => { const link = 'https://google.com'; const a = document.createElement("a"); a.setAttribute('href', link); a.setAttribute('target', '_blank'); a.click(); } – Sergii Apr 24 '23 at 12:59

score 1 · Answer 8 · answered Dec 20 '13 at 04:03

1

There's a setting in Safari under "Tabs" that labeled Open pages in tabs instead of windows: with a drop down with a few options. I'm thinking yours may be set to Always. Bottom line is you can't rely on a browser opening a new window.

answered Dec 20 '13 at 04:03

Bill Criswell

32,161
7
75
66

1

I don't think this is it. Safari doesn't open the site anywhere. It's like I didn't execute the line. – Steve Dec 20 '13 at 06:49

score 1 · Answer 9 · answered Jul 31 '23 at 07:10

1

It will not work simply because safari has no support for that.

Check MDN Docs for compatibility - https://developer.mozilla.org/en-US/docs/Web/API/Window/open#browser_compatibility

answered Jul 31 '23 at 07:10

susant patel

61
6

score 0 · Answer 10 · answered Mar 17 '22 at 16:20

0

This should work: window.location.assign(url); Usually it is important to save the state, before leaving the page, so have this in mind as well.

answered Mar 17 '22 at 16:20

lyuboe

151
1
6

score -14 · Answer 11 · answered Sep 26 '14 at 22:52

-14

The correct syntax is window.open(URL,WindowTitle,'_blank') All the arguments in the open must be strings. They are not mandatory, and window can be dropped. So just newWin=open() works as well, if you plan to populate newWin.document by yourself. BUT you MUST use all the three arguments, and the third one set to '_blank' for opening a new true window and not a tab.

answered Sep 26 '14 at 22:52

Guido

7

Incorrect, please, read the documentation first: https://developer.mozilla.org/en-US/docs/Web/API/Window/open – elpezganzo Mar 17 '21 at 20:46

window.open(url, '_blank'); not working on iMac/Safari

11 Answers11

Using setTimeout

Linked

Related