{"id":27,"date":"2004-08-24T00:45:45","date_gmt":"2004-08-24T08:45:45","guid":{"rendered":"\/?p=27"},"modified":"2009-12-05T03:23:28","modified_gmt":"2009-12-05T11:23:28","slug":"how-to-open-windows-with-javascript-the-right-way","status":"publish","type":"post","link":"https:\/\/www.slimjimmy.com\/weblog\/archives\/2004\/08\/24\/how-to-open-windows-with-javascript-the-right-way\/","title":{"rendered":"How to open windows with JavaScript the Right Way"},"content":{"rendered":"

All too often I see web sites open new browser windows using HTML<\/acronym> and JavaScript code such as:<\/p>\n

\r\n<a href="#" onClick="window.open('foo.html');"> <!-- BAD!<\/strong> -->\r\n<\/pre>\n
or:<\/p>\n
\r\n<a href="javascript:window.open('foo.html');"> <!-- BAD!<\/strong> -->\r\n<\/pre>\n
This is one of my biggest peeves.  Here’s why:<\/p>\n
    \n
  • For the first case, when users click on the link, a new window will appear, but the original window will scroll to the top of the page, causing the users to lose their place.  In many cases this defeats the point of opening a new window at all<\/strong>.<\/li>\n
  • The first case prevents the browser from marking visited links properly.  This compounds the problems of my first point.<\/li>\n
  • Both cases make the link completely useless in browsers that don’t have JavaScript enabled.<\/li>\n
  • Both cases prevent users from right-clicking on the link and explicitly requesting a new window.  Instead of a new window going to the desired page, they’ll get a new window with the original page (in the first case) or with a blank page (in the second case).<\/li>\n<\/ul>\n
    Better:<\/p>\n
    \r\n<a href="foo.html" onClick="window.open('foo.html');return false;<\/strong>">\r\n<\/pre>\n
    This solves all of the problems above.  The “return false<\/code>” is important!  When the onClick<\/code> event handler returns false, a browser does not follow the href<\/code> link.<\/p>\n
    Better yet:<\/p>\n
    Re-evaluate why you want to open links in new windows at all.  Most browsers have an “Open in New Window” command; if users want new windows, let them ask for it<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    All too often I see web sites open new browser windows using HTML and JavaScript code such as: <a href="#" onClick="window.open(‘foo.html’);"> <!– BAD! –> or: <a href="javascript:window.open(‘foo.html’);"> <!– BAD! –> This is one of my biggest peeves. Here’s why: For the first case, when users click on the link, a new window will appear, but […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[26],"class_list":["post-27","post","type-post","status-publish","format-standard","hentry","category-programming","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.slimjimmy.com\/weblog\/wp-json\/wp\/v2\/posts\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.slimjimmy.com\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.slimjimmy.com\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.slimjimmy.com\/weblog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.slimjimmy.com\/weblog\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":0,"href":"https:\/\/www.slimjimmy.com\/weblog\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.slimjimmy.com\/weblog\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.slimjimmy.com\/weblog\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.slimjimmy.com\/weblog\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}