(Get Attention Ticker for your web site)

Opening New Windows

By Will Bontrager

I'll let others debate what desired outcomes and situations should or should not be reason to cause new windows to open when a link is clicked. Instead, I'll show you how to do it, so you can if you want to.

You will learn how to set up individual links by inserting the target attribute, how to set up all links on a page with one line of HTML, and how to set up only links that lead to another domain with copy 'n paste JavaScript.

(Click here for the complete article.)

The JavaScript With Commented Steps

For those who are interested in how the JavaScript works, here is a repeat of the code presented in the article, but heavily commented for clarity.

<script type="text/javascript" language="JavaScript">
<!-- Copyright 2006 Bontrager Connection, LLC
// Code obtained from http://www.willmaster.com/possibilities/

// Get the domain name in the URL of the current page.
var thispagedomain = ExtractDomainName(document.URL);

// Iterate over any links on the current page.
for(var i = 0; i <= document.links.length - 1; i++) {

// Note: document.links[i].hostname or document.links[i].host 
//   could have been used to obtain the domain name in the 
//   link href. However, we don't want any subdomains that 
//   might be part of the domain. Therefore, we just strip 
//   the domain name from the link href URL with the custom 
//   function ExtractDomainName()

   // Store lowercased href info in variable url.
   var url = document.links[i].href.toLowerCase();
   // Go to the top of the loop and continue if variable 
   //   url doesn't start with "http://" (thus, must 
   //   be a URL to the same domain).
   if(url.indexOf('http://') != 0) { continue; }
   // Extract the domain name from variable url.
   var hrefdomain = ExtractDomainName(url);
   // If the extracted domain name is different than the 
   //   domain name of the current web page, give the  
   //   link a target="_blank" attribute.
   if(thispagedomain != hrefdomain) { 
      document.links[i].target = '_blank';
      }
   }


function ExtractDomainName(s) {
// Feed this function anything that looks like 
//   a domain name or URL. It will do its best 
//   to extract the domain without subdomains.

// For the comments, let's assume that s equals
//   "http://www.books.Example.co.uk:80/page.html"

// Remove http://, if present.
// (Result is "www.books.Example.co.uk:80/page.html")
var i = s.indexOf('//');
if(i > -1) { s = s.substr(i+2); }

// Remove path/file information, if present.
// (Result is "www.books.Example.co.uk:80")
i = s.indexOf('/');
if(i > -1) { s = s.substr(0,i); }

// Remove port number, if present.
// (Result is "www.books.Example.co.uk")
i = s.indexOf(':');
if(i > -1) { s = s.substr(0,i); }

// Return s if no letters (could be an IP address).
// (Doesn't apply to the example)
var re = /[a-z]/i;
if(! re.test(s)) { return s; }

// Split s into chunks on periods, store in array a.
// (Result is 
//          "www"
//          "books"
//          "Example"
//          "co"
//          "uk"
//    (5 chunks) )
var a = s.split('.');

// If less than 2 chunks, it's not really a domain name.
//   Just return s and be done with it.
// (Doesn't apply to the example)
if(a.length < 2) { return s; }

// Create domain name with last 2 chunks of array a.
// (Result is "co.uk")
var domain = a[a.length-2] + '.' + a[a.length-1];

// If more than 2 chunks ...
// (Yes, the example has 5 chunks)
if(a.length > 2) {
   // ... and if the last two chunks are each exactly 
   //   2 characters long, it's probably a domain with 
   //   the format Example.co.uk. Therefore, insert the 
   //   third from last chunk of array a into the front 
   //   of the domain name.
   // (The example "co.uk" matches those criteria where, if  
   //   "example.com" had been the domain, it would not.)
   // (Result is "Example.co.uk")
   if(a[a.length-2].length==2 && a[a.length-1].length==2) {
      domain = a[a.length-3] + '.' + domain;
      }
   }

// Lowercase the domain name and return it.
// (Result is "example.co.uk")
return domain.toLowerCase();
} // end of function ExtractDomainName()

//-->
</script>

June 6, 2006

Please note: Articles on this website are presented "as is". However -

If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.

Rate this blog post.
No page reload!

WillMaster > Blog > Development

Subscribe to
the Possibilities Ezine

RSS feed links

Blog Article Categories

Opening New Windows

WillMaster > Blog > Development

Subscribe tothe Possibilities Ezine

RSS feed links

Blog Article Categories

Opening New Windows

Subscribe to
the Possibilities Ezine