129

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?

11 Answers 11

285

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;
});
14
  • 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. Feb 1, 2017 at 20:09
  • 15
    This identifies the problem, the cause of the problem, and a workaround. This should be the selected answer. Apr 29, 2017 at 0:59
  • 4
    Instead of window.open, window.open("about:blank","_blank") worked for me
    – Shrabanee
    Mar 9, 2018 at 7:35
  • 4
    how can this be used where does myService come from?
    – Silve2611
    May 17, 2019 at 9:22
  • 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 2, 2021 at 21:44
50

Using setTimeout

EDIT: A few people are reporting that this method doesn't work anymore on the latest Safari.

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.

10
  • Cool workaround! Solved the issue on iPhone Safari for me. And thanks for the explanation.
    – HedeH
    Jun 23, 2022 at 10:56
  • 1
    UPDATE - target="_blank" stopped working for me. Had to use target="_top"
    – HedeH
    Aug 10, 2022 at 15:30
  • 3
    This answer is under valued! Thanks!
    – Adam Liu
    Aug 25, 2022 at 5: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, 2022 at 9:57
  • why is this required for window.open to work?
    – Joe Berg
    Nov 16, 2022 at 20:56
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>

3
  • 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: <button onclick='window.open("https://www.google.com", "_blank");'>Open Google search</button>. Apr 24, 2018 at 15:37
  • @FrankConijn Thank you for your clarification and your correct. I have made the edit in my post to reflect your correction. Nov 19, 2018 at 17:24
  • May i add : "Never use <a href="#" onclick="window.open(...);">" There is a subsection with THAT title on the window.open docs on developer.mozilla.org/en-US/docs/Web/API/Window/open. Seems pretty clear.
    – Nebulosar
    Jun 25, 2020 at 12:39
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);
4
  • 1
    this also does not include the "_blank" (new tab)
    – Smern
    Oct 1, 2020 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 2, 2020 at 6:53
  • 8
    adding target attribute and setting it as _blank breaks this again, safari will block it as a pop-up
    – mrben522
    Dec 14, 2020 at 14:52
  • This should be an accepted answer. Thanks. Mar 23, 2021 at 9:21
14

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

5
  • 8
    This causes the url to be opened in the current tab, not in a new tab (as specified in the question). Jan 17, 2019 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 5, 2020 at 6: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, 2020 at 12:43
  • Its working For ME. I don't need a popup window. Just need to open url. Thank you so much... Jul 14, 2020 at 9:47
  • I wanna add a comment that this also works when you would like to download some images or documents from a certain url. Dec 23, 2020 at 7:19
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:

  1. Safari -> Preferences
  2. Security -> Uncheck 'Block pop-up windows'
3
  • 56
    but you cannot block customers' popup windows
    – xiaoyu2er
    May 18, 2017 at 0: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, 2021 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, 2021 at 7:34
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();
2
  • 1
    This trick doesn't work in safari ios.
    – liberborn
    Jul 27, 2022 at 11:48
  • @liberborn, just checked on safari ios (iPhone) and it works. You need to add something like this: const onClickHandler = () => { const link = 'google.com'; const a = document.createElement("a"); a.setAttribute('href', link); a.setAttribute('target', '_blank'); a.click(); }
    – Sergii
    Apr 24 at 12:59
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.

1
  • 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, 2013 at 6:49
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

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.

-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.

1

Not the answer you're looking for? Browse other questions tagged or ask your own question.