Open links in a new window

Posted By: Mark Aplet 3 Comments April 30, 2010

If you perform a search for "open links in new window" you will typically find two groups of people. Ones the hate it when links open in a new window, and ones that hate links that don't open in a new window. It seems that people are pretty picky (and vocal) about the manor in which links open. Oddly enough searching for a good solution proved more difficult than I thought.

Basic Criteria

Because people are so particular about their links opening in new windows. I wanted to give users an option to open linked pages they way they want them to work. A preference toggle of sorts. I also wanted to default option to xhtml valid and it has to be accessible in it's default state or with javascript turned off.

Thanks to a friend and fellow web developer Andy Ford, who helped me with the final piece of the puzzle to make this work.

The Code

The code is pretty straight forward. We have a form with a checkbox with with text that reads something like "Open links in new window" This works as the preference toggle. If the box is checked do some dirty and non valid stuff to the code to make it work.

See a demo of this script here

<form name="targeter">
   <input type="checkbox" name="targetbox" id="tcheck" onclick="targetLinks(this.checked);">
   <label for="tcheck" style="cursor: hand;">Open links in new window</label>
</form>

<script language="JavaScript">
   function targetLinks(boNew) {
      if (boNew)
         where = "_blank";
      else
         where = "_self";
      for (var i=0; i<=(document.links.length-1); i++) {
         document.links[i].target = where;
      }
   }
</script>

I thought this was a bit easier to implement than most of the solution I found out there that required you to add a new class to the link. Some people suggested using rel="external" on the links. My response to this is simple. Not all links that need to open in a new window are external. Adding rel="external" is not semantic so I would prefer not to add that markup to my code in that way.

I am sure there is a better way to make this work. But this is what I scabbed together. If you have a better way, I would be interested in knowing about it.

Tags: Code · usability

3 comments so far ↓

  • 1 tim // May 6, 2010 at 8:36 AM
    I think this is a great idea, but could be made more useful with a bit more thought. Your code will change all links to _blank or _self, but that is pretty useless as is. I want some links to always be _self and not give the user control over them, while other links I will allow the user to control how they open. I would suggest adding a class to the links that users should be able to control. Then you can use document.getElementsByClassName() in your targetLinks function in place of document.links. Also, and your demo hints at this, why not notify your readers of what links are going to be target="_blank" ? For example this site - http://www.unm.edu/ - uses a style sheet that checks for any links beginning with http:// and adds an icon to the link to notify the user of external links (look under quick links and you'll see a few links). I think something similar could be done to let users know _blank vs _self. Either an icon, or a specific hover color for those links. If an icon is used, it could eventually become universally adopted so all users are accustomed to seeing it. Well, that may just be a pipe dream, but I think you get the idea. I do think this issue should be more important and have a lot more focus than it currently does.

    -----

    Additional thought : maybe this should all be handled by browser preferences. I could set my preference on how to handle external links and links with target="_blank". Not sure which solution is better.
  • 2 Mark Aplet // May 6, 2010 at 10:08 AM
    Tim, Thanks for the feedback. I have thought about this quite a bit. I have tried many possible solutions, each with the hope of delivering a better experience to users. Here is the problem as I see it, and the reasons for offering it up this solution.

    The problem since the beginning (and my reason for writing this article), is that you as the developer are making the decision for the user how you want links to be displayed. Again, the users are the ones upset by this because they want links to open they way they think they should be handled. Their way of thinking is completely different than yours. Hence the reason there is this tug-o-war to begin with.

    The problem with adding a class to a link is that again, your making a decision what links have the option of opening in a new window for the user. And that is still not what they want. The second problem--although minor--is that you have to add those classes to the link code every single time. If your managing a CMS site where users knowledge of html is often limited, there is no way of ensuring that all the links that require an additional class get those applied. Not to mention most web editors won't allow multiple classes to be applied to objects without editing the source code directly.

    Using a full url may also not work where you have internal links that a user might want to open in a new window. Most web editors remove full urls and replace them with their relative versions. You can of course chance the settings for most of them to leave the full urls alone. But now the problem is that if you look for http:// to make the link open in a new window or even displaying an icon for an external link, then your giving your user bad information, as the link may in fact be internal, but happens to use the full url.

    There is no clear winner here. And it's possible my views will change in the future when a new technique is discovered or something else that makes this article obsolete. So my argument (at least for now) is. What harm does it do by allowing a user to specify their own preference? Especially where you have pages of with lots of links.

    Sorry if I did not explain this well previously. I was trying to forgo the commentary that typically make my posts really long, and get right to the point hoping more people would be inclined to read what I had to say.
  • 3 Peter Anselmo // Jun 29, 2010 at 4:42 PM
    FWIW, when developing I follow the convention of all internal & relative links in the same window, and all external & absolute links in new windows. I've come to expect this from most sites I visit.

    I like Tim's idea of making this a browser preference. It would be fairly easy to have the browser check if the link is on the current site or not, and react accordingly. Hmmm, I'll be doing a plugin search after writing this.

    As an end user, I've also taken to making good use of center clicking links when I want a new window. Ideally, All users would know how to use this and it would be a non-issue, but that's dreaming. People are still amazed when I show them how to zoom.

Leave a Comment

Leave this field empty:

Theme Design By Mark Aplet

Super Powered by Mango Blog