I'm working on an application where users enter some input and they shouldn't leave the page when clicking on share links, e.g. a Facebook share link:
<a href=".php?u=http%3A%2F%2Fwww.example%2F">Share on Facebook</a>
I know it's very common to use popup windows for such links. But does it have any advantage over a simple target="_blank"
attribute? How do you compare the two methods and which is the right practice in such cases?
I'm working on an application where users enter some input and they shouldn't leave the page when clicking on share links, e.g. a Facebook share link:
<a href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.example.com%2F">Share on Facebook</a>
I know it's very common to use popup windows for such links. But does it have any advantage over a simple target="_blank"
attribute? How do you compare the two methods and which is the right practice in such cases?
5 Answers
Reset to default 8It depends what HTML version you use and if you care about W3C validation. In HTML5 you can use target="_blank"
but with previous XHTML versions you couldn't and you had to use JavaScript to achieve the same result and make your site W3C valid. I think that's the only reason why many people used this method.
Of course using Javascript makes that user has to have JavaScript enabled to open this link in new window (and using adblocks/ghostery and similar addons make block some JavaScript) so I think if you only can, you should use target="_blank"
Window.open requires Javascript and can be blocked by popup stoppers. However, it does have additional options (width, height, options, etc). On mobile browsers, many options will be ignored.
It is preferred to use _blank as it is native to HTML whenever possible.
Use target="_blank"
if you want it to work with people who have popup blocks and JavaScript disabled.
An unusual situation in which you'd have to use window.open
is when you want to create a document from scratch, using only JavaScript, when there's no link suited for the task. For example, you might use this when writing a userscript, to build a new page (when you don't have a server to serve pages to clients). An <a>
just wouldn't work for such a task.
One frequent use of window.open()
, before WebID gets wider adoption, is for OAuth authentication.
To not break the flow of the current page, this authentication is generally done on a different page, and since authentication providers generally don't allow their page to be embedded in an iframe, and that using an anchor <a>
wouldn't allow both pages to communicate, we need to use const popup = window.open(url)
and wait for the authentication to resolve in that popup before passing it the required info e.g through opener.postMessage()
.