Link Target Preferences

Before the age of tabbed browsing, I used to like knowing if hyperlinks would open in the current window, or a in a new window. For this very purpose, I slapped together a small snippet of JavaScript, that would not only tell the end user how external hyperlinks would open, but let the end user choose future preferences in a checkbox.

If you want the code, for your site, you can get it here.

Link Target Preferences

The Link Target Preferences system has the following main purposes:

  • By default, all external links open in the same window
  • The checkbox visually indicates to the end user, the state which link targets have
  • The end user can click this checkbox to change that preference
  • Any changed preferences is stored in a cookie for future use

The system is designed to be simple plug and play. For PHP aficionados, all code can be moved into an external include—even the “onload” code, which doesn’t use the default body onload="" method. The system will work out of the box, however, so it is easier for you to just grab the sample HTML file than show the code for it here.

Customization

I have commented out sections of the sample page, with advice on how each snippet should be used:

and

each snippet being followed by the code in question.

The changes that have to be made, reside in the top of the HTML page:

var url_1 = "http://www.example.com";
var url_2 = "http://example.com";

As you can see, change http://www.example.com and http://example.com to your own web server. This makes sure that on-site links doesn’t suddenly open in a new browser window.

var open_blank_default = false;

specifies the user experience for first time visitors. A true opens external links in a new window.

var site_title = "example";

makes sure there are no cookie conflicts. Not entirely sure if this is necessary, but better make sure.

Revision History

  • 1.0: Initial release
  • 1.1: Based on feedback, I moved all configuration into simple variables in the beginning of the file. There’s no longer any need to dig into the code. Also added CSS for a “hand” cursor and hover color for the <label> tag.

Questions?

The code validates, and works quite simply. I find it is most useful for Internet Explorer users, but you may use it if you find the need for it. Any questions are welcome.

12 thoughts on “Link Target Preferences”

  1. Jeff says:

    A possible method to simplify the changing of the code, which is already quite easy, could be adding a couple of preferences lines at the beginning of the js, and then simply use those variables throughout (ok, one variable for now), in which case you’d only have to edit one line at the very top. Probably doens’t make a difference though.

    By the way, this may not be related to the upgrades of wordpress, but now in your rss, the links actually link to your site; previously whenever I clicked a link to a post from bloglines it would go to journal/post-info rather than the entire url, which would then redirect to live journal in firefox (due to it searching google for a page.

  2. Joen says:

    Good suggestion Jeff with the regards to the code, I should’ve done that—maybe I’ll do it if I get some spare time one of these days.

    As for the RSS, yes that was related to my upgrading to WordPress 1.2.1. More on that issue is described in the support forum. In short—I’m not recommending the upgrade to WP users.

  3. fernando says:

    Joen, you’ve done it again.

    Genius!

    thank you.

  4. Digital Ruse says:

    Is it possible to have it so that the settings work without a checkbox?

    Just have the script always assume that I want all external links to open on a new window? I set the default setting to true, but links still are not opening in a new window.

    I’d prefer not having the checkbox on the site. ^^’v

    Thank

    -DR

  5. Joen says:

    Yep, that would be possible.

    Just download the link targets page, and change var open_blank_default = false; to var open_blank_default = true;, and then delete the checkbox. That should do it.

  6. Digital Ruse says:

    Well, I gave it a shot, but that didn’t seem to work. :/

    http://test.theruse.net/linktargets.html

    -DR

  7. Joen says:

    Ah that’s right, it sets the checkbox too. Sorry.

    Just remove line 67, and it should work:

    document.getElementById('linkprefs').checked = state;

    Or you could just comment it out:

    // document.getElementById('linkprefs').checked = state;

  8. Digital Ruse says:

    Okay, that worked perfectly!

    An aside, if you don’t mind me asking, is could instead of having it do:

    link.target = '_blank';

    Could it do:

    link.rel = 'external';

    I already tried it and it didn’t work. I am trying to keep the page XHTML compliant by using another script that checks a link that should look like this:

    (Sorry, for the ‘a’. Your preview said it was going to make it a link.)

    Anyway, the rel=”external” is the qualifier. My hope was that by using your script which checks for if the link is local or not, and then this one that would open it in a new window, I might of been able to keep compliance as well as get it to open in a new window.

    Thanks for all the help

    -DR

  9. Joen says:

    DR,

    Using this script to have external links open in a new window with XHTML strict is possible. It is not something I have looked much in to, but I know it’s possible.

    As it is now, the script adds the “target” attribute to all external links, and fills it out with “_blank”. It is also possible to have it add the “rel” attribute, with the value “external”.

    It is not something I can do off the top of my head, though I’m pretty sure it’ll involve adding link.rel = 'external' somewhere in the code.

    I’ll take a look at it once I get some time, which’ll be next week probably. You may want to subscribe to this thread to receive an email notification when I leave a comment. Just click the checkbox right below the comment input box. You can always unsubscribe later.

  10. Pingback: Blots of Info

Comments are closed.