ChatGPT解决这个技术问题 Extra ChatGPT

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

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?


J
Jeff Victorino

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

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.
This identifies the problem, the cause of the problem, and a workaround. This should be the selected answer.
Instead of window.open, window.open("about:blank","_blank") worked for me
how can this be used where does myService come from?
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.
u
user2704238

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>


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>.
@FrankConijn Thank you for your clarification and your correct. I have made the edit in my post to reflect your correction.
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.
D
David Buck

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

this also does not include the "_blank" (new tab)
@Dallas I guess you could add the attribute target in the process to have it behave as OP intended.
adding target attribute and setting it as _blank breaks this again, safari will block it as a pop-up
This should be an accepted answer. Thanks.
o
oguz ismail

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'


but you cannot block customers' popup windows
@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.
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.
S
Stephen Rauch

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


This causes the url to be opened in the current tab, not in a new tab (as specified in the question).
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.
@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
Its working For ME. I don't need a popup window. Just need to open url. Thank you so much...
I wanna add a comment that this also works when you would like to download some images or documents from a certain url.
S
Sergii

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();

M
Miguel Stevens

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.


Cool workaround! Solved the issue on iPhone Safari for me. And thanks for the explanation.
B
Bill Criswell

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.


I don't think this is it. Safari doesn't open the site anywhere. It's like I didn't execute the line.
l
lyuboe

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.


G
Guido

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.


Incorrect, please, read the documentation first: developer.mozilla.org/en-US/docs/Web/API/Window/open