Opening New Windows

For any of many possible reasons, sometimes it is desirable to have the browser open a new window for the new page when a link is clicked.

I'll let others debate what desired outcomes and situations should or should not be reason to cause new windows to open.

Instead, I'll show you how to set up links to open a new window when clicked, so you can do it 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.

How It Came About

The target attribute for the HTML A (anchor) linking tag was developed when frames were developed. It tells the browser which frame to send the linked page to.

The format is: target="framename"

How To Use It To Open a New Window

If the name of the target is "_blank", browsers will open a new window for the linked page.

For most browsers, a target name (except "_self") that does not correspond to a current frame name will open a new window.

But that behavior can't be depended on. Use target="_blank" to open a new window.

Here is an example:

There are some exceptions to the "'_blank' always opens a new window" statement. Here are ones I'm aware of:

The browser might have a setting to prevent new windows from opening.
Third-party software might prevent new windows from opening.
The Opera browser opens a new tab instead of a new window.
The Firefox browser can be set up to open a new tab instead of a new window.

Contrasting with the target="_blank" attribute, the target="_self" will open the linked page in the current window.

How To Automatically Open All Links In a New Window

There is one line of HTML code you can put into the HEAD area of your web page source code that will cause all links on the page to open a new window —- except those that already have a target attribute in the anchor tag.

It's so much easier to paste one line of HTML into a page than it is to change every anchor tag.

Here is the line:

It establishes a default target, which applies to all links on the page that don't already have a target attribute.

If you have links on the page that must open in the current window, you can override the default by putting the target="_self" attribute into those anchor tags.

Opening Only External Links In a New Window

If all links on a page that lead to another domain should open a new window, but links that lead to page on the same domain should load in the current window, don't use the BASE tag.

Instead, put this JavaScript at the bottom of the BODY area of the source code:

<script type="text/javascript" language="JavaScript">
<!-- Copyright 2006 Bontrager Connection, LLC
// Code obtained from /library/

var thispagedomain = ExtractDomainName(document.URL);

for(var i = 0; i <= document.links.length - 1; i++) {
   var url = document.links[i].href.toLowerCase();
   if(url.indexOf('http://') != 0) { continue; }
   var hrefdomain = ExtractDomainName(url);
   if(thispagedomain != hrefdomain) { 
      document.links[i].target = '_blank';
      }
   }

function ExtractDomainName(s) {
var i = s.indexOf('//');
if(i > —1) { s = s.substr(i+2); }
i = s.indexOf('/');
if(i > —1) { s = s.substr(0,i); }
i = s.indexOf(':');
if(i > —1) { s = s.substr(0,i); }
var re = /[a-z]/i;
if(! re.test(s)) { return s; }
var a = s.split('.');
if(a.length < 2) { return s; }
var domain = a[a.length-2] + '.' + a[a.length-1];
if(a.length > 2) {
   if(a[a.length-2].length==2 && a[a.length-1].length==2) {
      domain = a[a.length-3] + '.' + domain;
      }
   }
return domain.toLowerCase();
}
//-->
</script>

The JavaScript needs to be put into the web page source code somewhere below the last link. Right above the closing </body> tag would be good. That way, the JavaScript knows what it has to work with.

Placement of this doesn't matter with some browsers, but with others it does.

The JavaScript will automatically insert a target attribute value "_blank" into links leading off site.

Learning More

The same JavaScript, but with lots of comments, is in the /blog/development/Opening_New_Windows.html blog post. It could be a learning experience if you're new to JavaScript.

In particular, the ExtractDomainName() function comments could be interesting. It shows, step-by-step, how a URL strips off everything but the domain name. Even subdomains are removed.

The loop that assigns the target attribute to the links on the page can easily be modified to read the value in existing attributes of, or assign other attributes to, the HTML A (anchor) linking tag.

Question: Did you find this article interesting and understandable? How can it be improved? Your response is anonymous. When done typing, click anywhere outside the box. [more info]

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.

WillMaster > Web Development Tools Reference Library > Web Development Help

Finding something useful?

Subscribe to
the Possibilities Ezine

Most Recent
Software Additions

Go Short URL

Secure View and Remove

Survey Lite

Attention Ticker

Opening New Windows

WillMaster > Web Development Tools Reference Library > Web Development Help

Finding something useful?

Subscribe tothe Possibilities Ezine

Most RecentSoftware Additions

Go Short URL

Secure View and Remove

Survey Lite

Attention Ticker

Opening New Windows

Subscribe to
the Possibilities Ezine

Most Recent
Software Additions