JavaScript open links in new window Oct22 '06

I've recently adopted this Sitepoint approach to opening links in new browser windows.

Using this method, all I have to do is apply an attribute of rel="external" to any link that I wish to open in a new browser window. To me, this is much more preferable (and standards-compliant) than using target="_blank".

The JavaScript function (obtained from Sitepoint) that controls this is relatively straight-forward. I also made an addition to the function that controls links that you want to open in the same external browser window. In other words, you open the external window once, and then every additional link opens in that same external window (as opposed to a new window each time).

function externalLinks()
{
    if (!document.getElementsByTagName) return;

    var anchors = document.getElementsByTagName("a");

    for ( var i=0; i < anchors.length; i++ )
    {
        var anchor = anchors[i];

        if ( anchor.getAttribute("href") && anchor.getAttribute("rel") == "external" )
        {
            if ( anchor.getAttribute("className") )
            {
                anchor.target = anchor.getAttribute("className");
            }
            else
            {
                anchor.target = "_blank";
            }
        }
    }
}

For explanation on how the function works, please see the original Sitepoint article.

My addition, which is not part of the original script from Sitepoint, is in bold. It checks to see if the class attribute is set for the <a> element. If so, it uses that class attribute value as the name of the external window. So, as long as every link (that you wish to have open in the same external window) has the same class attribute - all of those links will open in the same parent window.

For example, here are three links that I want to open in the same external window:

<a href="link1.php" class="newWindow" rel="external"> Link 1 </a>

<a href="link2.php" class="newWindow" rel="external"> Link 2 </a>

<a href="link3.php" class="newWindow" rel="external"> Link 3 </a>

Here are two more links that will open in an external window, but not the same one as the above three links:

<a href="link4.php" class="differentWindow" rel="external"> Link 4 </a>

<a href="link5.php" rel="external"> Link 5 </a>

Notice the class attribute value has changed in Link 4, and the class attribute doesn't even exist in Link 5.

Cautions

This entire script has only been tested in Firefox 1.5.x for Windows, and Internet Explorer 6.

There is also the slight problem of window focus. For example, if I click on a link that uses an existing window as it's destination, the focus should be placed on that window. It is currently not happening that way.

Additions to this script may be made over time.

Categories: JavaScript , Tutorials , Web Development

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info Name: Email (will not show on page):

Follow new comments via email? (You can turn this off any time)

Do you want your comments emailed to yourself?

Home Page (optional):

I'd tend to disagree with this approach. It's been removed from more recent DTDs for a reason. If you want to do it, use a DTD that supports ... Read more.

No, I agree. I'd like to do it "the right way," so maybe I need to look into it more... Thanks for your thoughts. ... Read more.

matthom is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from a suburb of Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.