///New Browser Window Checkbox

New Browser Window Checkbox

New Browser Window Checkbox

Let’s suppose you want to provide your site visitors the option of automatically causing a new browser window to open whenever they click on a link — by simply checking one checkbox.

This article shows you how.

If you put the checkbox on more than one page, and you want to pre-check the box if the visitor checked it on a previous page, this article shows you how to do that, too.

You don’t have to change your links.

All you need to do is add the checkbox and JavaScript to your page. Everything you need can be copied from the source code page (link below) and pasted into your page.

When your visitor checks the checkbox, the JavaScript causes all links on the page to get the attribute. When your visitor unchecks the checkboxes, all links get the target=”_self” attribute.

The JavaScript does this by cycling through all the links on your page and applying the attribute. Your page’s source code isn’t changed, but the attribute is applied nontheless.

The built-in JavaScript “document.links.length” variable knows the number of links on your page. The link attributes are in an array, also built-in, and that array is used to re-set the link target attributes.

Note: Because the target attribute is changed, this is not suitable for framed sites. Framed sites depend on the target attribute to keep frames in order; messing with that could create a jumbled confusion.

Two versions of the JavaScript are available to copy and paste into your page or pages.

One version requires the site visitor to check the checkbox on any page where new browser windows are desired when a link is clicked. The other version uses cookies to remember

1. the state of the checkbox the last time it was checked or unchecked in order to initialize the checkbox on new pages into the same state, and

2. the state of the previous page’s link target attributes in order to give the links on the new page the same attributes.

Both the source code for the version with cookie code and the version without are linked from the demo page at http://willmaster.com/a/18/pl.pl?art182 The cookie version is 66 lines of code and the non-cookie version is 19 lines.

Simply paste the code in the spot where you want the checkbox to appear. Once pasted in and uploaded to your server, it’s ready to go.

If you use the cookie version, two places in the source code will need to be verified correct:

1. At about line 6, you’ll find this line:

var CookieName = 'TargetLink';

If your web site is setting other cookies, verify that none of them uses a cookie name of TargetLink If another cookie does use that name, change TargetLink in the above line to something that is not used by other cookies on your site.

2. At about line 61, you’ll find this line:


That line delays three seconds (3000 milliseconds) before executing the code that first checks for a TargetLink cookie and, if found, checks the checkbox and changes the link target attributes on the page.

The delay is to give the browser time to load every link on the page. If the code executes before all links are loaded, some links will not get the proper target attribute.

If your page takes more than about 3 seconds to load, change the number in that line to something that will allow the page to load before the code executes.

If you’re uncertain whether or not to use cookies for the checkbox, use the cookie version. For non-cookie use, disable the line of code that sets the cookie. Re-enable it whenever you decide to use cookies again. Below is how to disable the cookie setting line of code.

At about line 34 of the JavaScript, you’ll see this line:

document.cookie = CookieName + '=' + v + '; path=/';

In front of that line, put two slash characters, like:

//document.cookie = CookieName + '=' + v + '; path=/';

Those two slash characters at the beginning of the line disable the line. Later, if you decide to use cookies again, simply remove those two slash characters.

If you think you might want to implement a “new window” checkbox sometime in the future, remember that the http://willmaster.com/possibilities/archives/ page has links to past articles, including this one. If you remember WillMaster.com, you can find the article again.

2010-05-26T11:29:36+00:00 April 22nd, 2005|JavaScript|0 Comments

About the Author:

Leave A Comment