Opening Popup Windows With No Extra Markup

function TJKpop(){ // v1.0 | www.TJKDesign.com var e = document.getElementById('wrapper'); if (e){ var a=e.getElementsByTagName('a'); for (var i=0;i<a.length;i++){ if (a[i].getAttribute('href') != null && a[i].getAttribute('href').indexOf("://") >= 0 && a[i].getAttribute('href').toUpperCase().indexOf("MYDOMAIN") a[i].getAttribute('href').toUpperCase().indexOf(document.domain.toUpperCase()) == -1){ a[i].className+=a[i].className?' outlink':'outlink'; a[i].title+=' (opens in new window)'; a[i].onclick=function(){newWin=window.open(this.href,'TJKWin');if(window.focus){newWin.focus()} return false;} // a[i].onkeypress=function(){newWin=window.open(this.href,'TJKWin');if(window.focus){newWin.focus()} return false;} } } } } window.onload = function(){if(document.getElementById) TJKpop();} 

What does this script do?

1. using the href value of the anchors, it finds the "external" links inside a given element.
2. it applies a style to the links (applies a class or appends a class name to an existing class attribute's value)
3. it attaches a title attribute to the links (or appends a string to the existing title attribute's value)
4. it applies the behavior to each one of these links (through the onclick event handler)

You may use any available element you want. For example, if your markup does not include a "wrapper", you may use "body" instead; in this case, you'd use the following:
var e = document.getElementsByTagName(body)[0];

What are the main advantages of this method?

• It is hook-free; it assures complete separation of structure and behavior
• In JS-challenged browsers, or if Javascript is disabled, there is no style applied that would differentiate these links from others
• It does not spawn multiple windows

For those interested in how it works:

function TJKpop(){ var e = document.getElementById('wrapper');

Find "wrapper" in the document and set it to "e".

if (e){

If "e" contains an object reference, it is worth looking past this opening bracket.

var a=e.getElementsByTagName('a');

Creates an array ("a") of all As found in "wrapper".

for (var i=0;i<a.length;i++){

We are using a for loop to go through all the anchors. Between the parentheses, we have an Initialization statement (we could have used "var i=1;i<=a.length;i++" as well), a Condition (as long as "i" is less than the number of elements in the array, the statements inside the for loop are executed) and an Updation statement (that adds 1 to the variable "i").

if (a[i].getAttribute('href') != null && a[i].getAttribute('href').indexOf("://") >= 0 && a[i].getAttribute('href').toUpperCase().indexOf("MYDOMAIN") a[i].getAttribute('href').toUpperCase().indexOf(document.domain.toUpperCase()) == -1){

We cannot assume to find a "href" attribute with every A element, so we start by checking for this first. Then we use getAttribute() to get the value of the named attribute on the current node to verify that this value contains the "://" string.
That would be enough if the value returned was always a perfect match with the value from the source code; unfortunatley - in some browsers - the value returned is always an absolute path. This is why we need to check for the presence of another string, to make sure we exclude links that point to our own domain.

a[i].className+=a[i].className?' outlink':'outlink';

The DOM attribute className is used to set a class for that node; if there are previously existing current classes then it appends the string " outlink".

a[i].title+=' (opens in new window)';

We do the same with title. If there is a previously existing title, it appends the string " (open in new window)" .

a[i].onclick=function(){newWin=window.open(this.href,'TJKWin');if(window.focus){newWin.focus()} return false;}

Now we use the onclick event handler to attach the behavior to the links. "this.href" passes the href value found in the markup to the function; the string "TJKWin" is the name we give to the popup so these links do not spawn multiple windows. Then, by switching "focus" between the parent window and the popup we prevent the popup from disappearing behind the opener if the user selects another link. To finish, we use "return false" to make sure that Javascript enabled browsers ignore the href value in the markup.

To prevent issues with popup blockers, you may want to test for window.open before running the script or you can simply replace the onclick statement with the following:
a[i].target='_blank'; (this will spawn multiple windows though...)

// a[i].onkeypress=function(){newWin=window.open(this.href,'TJKWin');if(window.focus){newWin.focus()} return false;}

This line is commented and thus ignored. The WAI guidelines (checkpoint 9.3) says one should implement a redundant mechanism (i.e., onclick/onkeypress), but - as far as I know - this recommendation makes tabbing navigation impossible in Gecko browsers and Opera.
Read the end of this article to find out about a workaround...

}}}}

Time to close all the brackets we've opened.

window.onload = function(){if(document.getElementById) TJKpop();}

document.getElementsById is used here to make sure the method is available and that we can run the script.
We're using the window.onload handler to call the function, but to make sure this script behaves correctly in the presence of others, a better approach would be to use Simon Willison's solution.

 |