Printable View
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:
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?Code:<a href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.example.com%2F">Share on Facebook</a>
Hi there Rain Lover,
The target="blank" attribute has two advantages that come to mind...
- it does not require javascript
- it is not affected by pop-up blockers
coothead
Popup blockers will block target="_blank" if the settings are strict enough. In fact, since window.open will not usually be blocked if activated by a click action of the user (it will be blocked, again, if the settings are strict enough), these are about equivalent in that department. It's correct that target doesn't require javascript. Using window.open allows (though does not require) one to use specifications. Although many of these are now ignored by most browsers as a matter of course, most still allow specification of width, height, top and left, and sometimes a few other things. These can be handy.
However, in most cases it's overall bad form to open a new window. The user can do this his/her self, if desired. If the new content is such that it should not change the root page in the browser, it can often be introduced via AJAX, and/or a popup div, and/or an iframe. If it is from another site, best to leave that (decision as to where to open it) to the user. Otherwise you might inadvertently violate TOS and/or copyright.
Yes, my beloved iframe. TOS-issues can be taken care of by explicitly mentioning the foreign URL. Here's a crazy idea:Quote:
Originally Posted by jscheuer1
Code:<div id="popup_frame" style="font-family: verdana; font-size: 12px; "></div>
<a href="javascript: void(0)" onclick="document.getElementById('popup_frame').innerHTML='<div style=\'position: absolute; left: 0px; top: 25px; right: 0px; bottom: 0px\'><div style=\'position: relative; float: right; cursor: pointer; background: darkred; color: white; font-weight: bold; font-size: 13px; top: -25px\' onclick=\'document.getElementById("popup_frame").innerHTML=""\'> X <\/div><br><iframe id=\'ifr\' src=\'http://dynamicdrive.com\' style=\'position: absolute; width: 100%; height: 100%; border: 1px solid black; margin-left: -1px\' frameborder=\'0\'><\/iframe><\/div>'; document.getElementById('popup_frame').innerHTML='<div style=\'position: absolute; left: 10%; top: 10%; right: 10%; bottom: 10%; background: #dedede; color: black; border: 1px solid black; border-bottom:0\'>'+'<div style=\'position: absolute; text-align: center;height: 35px; left:50px; top: 5px; right: 50px; overflow-y: auto;overflow-x: hidden; z-index: 1; \'>'+document.getElementById('ifr').src+'<\/div>'+document.getElementById('popup_frame').innerHTML+'<\/div>'">popup DD</a>