I have something like this:
<a
onClick={e => { getDownloadLink()
.then(url => window.open(url)) }}>Download</a>
the getDownloadLink method have to first POST to get a url and then trigger the download by window.open(url)，but I found that the browser will block the window.open behavior. How can I prevent that?
I see a lot of questions similar in stackoverflow, but I still didn't find a method to solve my problem. And I found that the aws s3 page do something similar, the page will not being blocked by browser. So... I think there must be some method to handle this.
Don't use window.open, just make the browser do what it already knows to do with HTML: build a link anchor, then click it.
// create an temporary, invisible link and open it in a new tab
function openURL(url) {
var a = document.createElement("a");
a.setAttribute("target", "_blank");
a.href = url;
a.style.display = "none";
// you can't click a link unless it's part of the document:
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
This way you're telling the browser to just "open a link the normal way", and it'll happily do so instead of blocking questionable APIs that have a history of being used for popups and other questionable purposes.
Related
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?
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;
});
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.
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>
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);
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'
window.location.assign(url) this fixs the window.open(url) issue in ios devices
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();
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.
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.
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.
I am currently trying to trigger a file download using following code in Javascript:
window.location.href = downloadUrl;
That works fine in Chrome, IE and Edge, but Firefox unloads the page due to the new URL and hence closes all opened websockets. I know that this is an odd mannerism of FF, but is there any workaround which I can use?
It would work with window.open(downloadUrl); and closing the new tab after a certain timeout, but I would like to prevent opening a new tab just for triggering the download.
Any help would be appreciated, thanks.
After a lot of researching and experimenting I found the following solution:
Create a link in JavaScript with the download attribute, click it and remove it after some time (I am using ExtJs):
var a = document.createElement("a");
document.body.appendChild(a);
a.style = 'display: none';
a.href = downloadUrl;
a.download = 'test.zip';
a.click();
Ext.defer(function(link) {
document.body.removeChild(link);
}, 200, this, [a]);
Just stumbled on this issue. When user clicks a link (including 'download' one), browser believes he is leaving current page and closes websocket (this is likely reasonable). Opening link by Javascript onclick event (or window.open and so on) doesn't help. Setting target="_blank" helps, but creates uncomfortable blink at the moment of click. Finally I came up with the following:
<iframe src="about:blank" name="iframe_a" class="ws_keep_conn"></iframe>
Click this
CSS
.ws_keep_conn {position: absolute; left: -9999px; visibility: hidden;}
That's all, websocket lives, smooth behavior with no blink!
I have a great working code that opens a link in the same window when I click it, it's inside a dropdown menu.
This is in javascript.
problem is that I would like it to open up in a new tab instead of the same window. How can I do this?
here is my code:
items["linkeee"] = {
"label": "mylabel",
"action": function(obj) {
openUrl('http://mypageaa.com/page' + addId);
}
};
update -- also my html looks like this:
mylabel
BUT I don't have direct access to the html without messing stuff up. I gotta do this up there with the javascript
update
how do i combine 'http://mypageaa.com/page' + addId to add , "_blank"
please help thanks
Turn off pop-up blockers for the domain at browser preferences or settings, see chrome Pop-up blocker when to re-check after allowing page. Use window.open()
var w;
items["linkeee"] = {
"label": "mylabel",
"action": function(obj) {
w = window.open("http://mypageaa.com/page", "_blank");
}
};
Alternatively, use <a> element at html with target attribute set to "_blank"
mypageeaa
Using javascript
var a = document.createElement("a");
a.href = "http://mypageaa.com/pagee" + addId; // `encodeURIComponent(addId)`
a.target = "_blank";
document.body.appendChild(a);
a.click();
use window.open instead of your openUrl method, but new window is not guaranteed to open, the browser may block it.
From what I have read in the documentation and several other answers, It appears this behavior depends on user-preference / (user)browser configuration.
From JavaScript's side, there's nothing you can do to reliably open an URL in a new tab
See:
Open a URL in a new tab (and not a new window) using JavaScript
Documentation http://www.w3schools.com/jsref/met_win_open.asp
I suggest using the method
window.open(URL, name, specs, replace);
It defaults to opening a new window. (tab vs window is a user preference)
documentation here.
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?
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;
});
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.
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>
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);
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'
window.location.assign(url) this fixs the window.open(url) issue in ios devices
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();
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.
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.
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.
I am currently developing a web application where I need to open a popup window to show a report. The problem is that some versions of explorer don't support the window.open javascript function, so when this is the case I catch the error and open the new url with location.href. Here the code:
try {
window.open(url, "","width=1002,height=700,location=0,menubar=0,scrollbars=1,status=1,resizable=0")
} catch(e) {
location.target = "_blank";
location.href = url;
}
The problem is that the location.target is not working and I would like to know if there is a way to specify the target of the location.href so it can be opened in a new tab.
try this one, which simulates a click on an anchor.
var a = document.createElement('a');
a.href='http://www.google.com';
a.target = '_blank';
document.body.appendChild(a);
a.click();
You can use this on any element where onclick works:
onclick="window.open('some.htm','_blank');"
The problem is that some versions of explorer don't support the window.open javascript function
Say what? Can you provide a reference for that statement? With respect, I think you must be mistaken. This works on IE6 and IE9, for instance.
Most modern browsers won't let your code use window.open except in direct response to a user event, in order to keep spam pop-ups and such at bay; perhaps that's what you're thinking of. As long as you only use window.open when responding to a user event, you should be fine using window.open — with all versions of IE.
There is no way to use location to open a new window. Just window.open or, of course, the user clicking a link with target="_blank".
If you go with the solution by #qiao, perhaps you would want to remove the appended child since the tab remains open and subsequent clicks would add more elements to the DOM.
// Code by #qiao
var a = document.createElement('a')
a.href = 'http://www.google.com'
a.target = '_blank'
document.body.appendChild(a)
a.click()
// Added code
document.body.removeChild(a)
Maybe someone could post a comment to his post, because I cannot.
You could try this:
<script type="text/javascript">
function newWindow(url){
window.open(url);
}
</script>
And call the function
If you are using an <a/> to trigger the report, you can try this approach. Instead of attempting to spawn a new window when window.open() fails, make the default scenario to open a new window via target (and prevent it if window.open() succeeds).
HTML
Link
JS
var spawn = function (e) {
try {
window.open(this.href, "","width=1002,height=700,location=0,menubar=0,scrollbars=1,status=1,resizable=0")
e.preventDefault(); // Or: return false;
} catch(e) {
// Allow the default event handler to take place
}
}
document.getElementById("myLink").onclick = spawn;
Why not have a hidden anchor tag on the page with the target set as you need, then simulate clicking it when you need the pop out?
How can I simulate a click to an anchor tag?
This would work in the cases where the window.open did not work
As of 2014, you can trigger the click on a <a/> tag. However, for security reasons, you have to do it in a click event handler, or the browser will tag it as a popup (some other events may allow you to safely trigger the opening).
jsFiddle
<input type="button" value="fake button" />