Inhalt

04.01.2010  ·  Dirk Schürjohann zum Thema jQuery. Kommentare 2

Mark external links and open in new window/tab (jQuery)

Specs:

  1. filter external links (check the hostname)
  2. filter links marked as rel="external"
  3. filter links in image maps (area) as well
  4. text links only (do not contain img, div or mailto): add CSS class .external providing an additional icon
  5. open external links in new window/tab

The code (jQuery):


$(document).ready(function(){
  $('a, area').filter(function() {
    return this.hostname && (this.hostname).split(":")[0]
      !== (location.hostname).split(":")[0]
    || $(this).attr('rel') == 'external';
  })
  .not(':has(img, div, mailto)')
  .addClass('external')
  .end()
  .click(function(e) {
    open(this.href);
    e.preventDefault();
  });
});

Notes:

  • Why not mark external links containing images, div or mailto with CSS class .external? This is because we want to add the icon to pure text links only. Links containing images or whatever kind of block elements may disturb the site layout if an additional icon would be added.
  • Use rel="external" to force opening a link in a new window/tab.

CSS providing an icon for external links marked with class .external:


a.external {
  background-image: url(icon_external.png);
  background-position: right top;
  background-repeat: no-repeat;
  padding-right: 11px;
  zoom: 1; /* IE */
}

(Inspired by Karl Swedberg at learningjquery.com.)

Kommentar hinterlassen  //  RSS-Feed mit Kommentaren zu diesem Beitrag Feed

2 Kommentare

  • 1

    Robert 

    Dirk,

    care to explain why you chose to capture the ‘click’ event and let it perform the (as far as I can see) default off-the-shelf event behaviour? I fail to see the need for this part:

    .end()
    .click(function(e) {
    open(this.href);
    e.preventDefault();
    });

  • 2

    Dirk Schürjohann (Autor)

    Robert, thanks for your feedback. I’m not sure how to handle your question: You don’t ask for a technical explanation, right? You’re focussing on the theory part of whether to force opening external links in new windows/tabs vs. letting the user deal with the targets?

Kommentar hinterlassen