Opening Link in New Tab with JS
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'd like to open the link to Imgur in a new tab (not new window) once my canvas has been sent to Imgur. Currently the script sees the new JSON each time it's clicked, which I like, but instead of it creating a clickable link I'd like it to open automatically. How might I achieve this?

Here's a JSFiddle that I've been playing with: https://jsfiddle.net/code4ever/uyxz8vko/

Thanks,

sharper

awarded to Wuddrum
Tags
javascript

Crowdsource coding tasks.

3 Solutions

The trick is the target attribute set to "_blank". No JS needed. This is some documentation and examples on the target attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel
jduplessis294 19 days ago
Hey, thanks, but I was looking for it to open on the same click as the button. Thanks though!
sharper 19 days ago
Winning solution
Perfect, thanks!
sharper 19 days ago

https://jsfiddle.net/uyxz8vko/5/ this should do it,

you can find documentation here: https://stackoverflow.com/a/28374344/4771750

UPDATE: concerning popup alert.

following your comment, about preventing the popup alert,

first, i tried to follow this answer https://stackoverflow.com/a/34903482/4771750, by adding a form, and submit it, instead of simulating the button click. you can see it's working fine. https://jsfiddle.net/b039wc1h/3/

but, when implementing to your code, it didn't work.

link with same problem in your code: https://jsfiddle.net/uyxz8vko/20/

after more researches i have found, that javascript, is blocking only the ajax requests, not all the code.

in other words, opening popup after ajax call isn't allowed.

you can see more here: https://stackoverflow.com/a/19279442/4771750

so to achieve what we want, we need to:

1- open a new window.

2- start the ajax call.

3- change the location of the new window after getting ajax response.

this seems the only solution that could work.

this is what i was based for (the solution i followed): https://stackoverflow.com/a/39581343/4771750

here is the solution that i have integrated in your code: https://jsfiddle.net/uyxz8vko/28/

Since we now have a solution, why not to think about improvements? ;p

we now achieved our goal, and we could open the new tab, but user, will see a blank page, that will be charged, after the IMGUR ajax response. this isn't UX friendly, so i think instead, to add a loader image, that will be shown (in full screen) as page loader, so the user, think, he is in the right page, and will not notice the redirection to the imgur image after response.

giving a loader image will helps doing that.

you can see it in action from here: https://jsfiddle.net/uyxz8vko/29/

i think this is the sharper solution (as your username :p) we could ever get :)

Enjoy! ;)

Thanks for the reference!
sharper 19 days ago
no need to thanks! ;) but noticed, that users must allow popup, try to use jquery to perform the click to see if it bypass it.
Chlegou 19 days ago
Would you mind showing me an example forked from the accepted fiddle, for a tip? :)
sharper 19 days ago
i have updated my bounty, with solution that bypass the popup alert :) waiting for your review ;)
Chlegou 19 days ago
Reviewed, thank you! I dig it!
sharper 19 days ago
glad you like it :) and thanks for the tip :) . btw, i noticed, that the question is duplicated. did you made that in purpose? also, since this question in documented, better to keep it as reference.
Chlegou 19 days ago
Hi, yes, that was a mistake. When I created it, it submitted twice somehow. Will do! Saved :)
sharper 19 days ago
View Timeline