DHTML Code, JavaScript Code

How to make a link open in a new window with XHTML

The old-fashioned method of opening a link in a new window is to use the attribute target="_blank". Unfortunately, if you use an XHTML validator, you'll find that this attribute has been deprecated. Originally it was proposed to use the 'rel' attribute, like this: rel="external". Although this validates, it doesn't cause the browser to open a new window.

So, here's a way using JavaScript to have valid XHTML, and have your links open in a new window! Just make sure your links have the rel="external" attribute set, then add this JavaScript code to the <head> section of your web page. It will loop through your links, and dynamically add the old target="_blank" to the element, but this is on the client-side, so no errors in validation are caused.


addLoadEvent(externalLinks);

function externalLinks() {
  if (!document.getElementsByTagName) return;
  var anchors = document.getElementsByTagName("a");
  for (var i=0; i<anchors.length; i++) {
    var anchor = anchors&#91;i&#93;;
    if (anchor.getAttribute("href") &&
      anchor.getAttribute("rel") == "external")
      anchor.target = "_blank";
    }
}
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
&#91;/code&#93;

If you're going to use this method throughout your site, it would make sense to place this code in an external .js file, and reference it in the &lt;head> if you page, like this: 
<script src="external_links.js" type="text/javascript"></script>
Share

9 Comments

  1. So instead of writing invalid code, you use JavaScript to write the invalid code for you? Wouldn’t it be better to just avoid opening pages in new windows altogether?

    I find it very annoying when I click on a link and a new window pops up—if I want to stay on the original page, I will open the link in a new tab…

  2. The javascript isn't wrriting invalid code, it's defining behavior (that's what it's supposed to do). HTML is there to structure the content, and that's why target="_blank" is invalid code in that context.

    There are good reasons to use new windows, it's not all just trying to keep visitors on your site. What about when you want a small window to pop up to give some details about something, and you need something bigger than a title="" but sending them to a new page would be awkward?

    Personally, I think this is an example of the W3C missing the mark. It's kind of like the tag. If you want to nit-pick then yes, italics belongs in your CSS, but actually doing it that way is impractical enough to be wrong.

  3. This article was exactly what I was looking for to keep my document strict. You are correct, JavaScript is a behavior and target="_blank" belongs in JavaScript

    Thanks for the script!

  4. This suggestion just caps an altogether unuseable website. How many colours on this website are actually legible? SEO? My old black hat.

  5. Agree with "Busy" – target="_blank" is invaluable to keep the site visitor's experience on track …

    Maybe too pragmatics a view?

    N

  6. <Different Elements> - blog » Blog Archive » Useful Links
  7. When the XHTML standards were devised, who was it that sat in their ivory tower and decided what behaviors were acceptable and those that were not? Why not let web site producers decide for themselves which behavior they prefer? Why deliberately limit the technology in the name of an idea and forced standardization?

    I understand the goal is for web visitors make their own link clicking decisions, i.e., stay in the same browser window or right click and select "Open Link in New Tab." Not all web browser users are that savvy, though. Also, ecommerce merchants like the option of selecting the behavior that they *think* might encourage visitors to stay on their site.

    So thanks for this solution. I tried it and it works great.

  8. if you are using jQuery, you may replace all script with
    $('a[rel=external]').attr('target', '_blank');

  9. Nathan Phillip Brink (binki)

    I like the idea of links always behaving in the same manner. Modern mice have the third middle-click button which every browser understands to be `open in a new tab'. I first came upon this page trying to find out if the XHTML standard provided an alternative for the target attribute, but I see from the article that it is not supported and that's fine with me. If a click-path leads a user to another page, the page he came from should be accessible and navigable-to enough so that the user can return to that page later if he was actually interested in staying.

    If a site needs to display more information than in just a title attribute, it should probably be using some sort of jQueryUI popup or in a styled expandable helptext area. Requiring a whole new tab/window for that sort of thing makes it harder for the user to look at both the helptext and the form he's filling out at the same time. I.e., users should not be forced to user their window manager's positioning features and browser's tab detachment support just to get both the form and helptext displayed simultaneously.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image