#################################################################
The article was obtained at the following URL: http://www.kfwebs.net/articles/article/24
The article might be distributed further as long as it is provided as it is, with the credits stated.
The Article was written and first published by KF Webs, at http://www.kfwebs.net
#################################################################
An aquaintance of mine requested some assitance on how to use JavaScript to have all links on a page open up in a new window. The background is that he has a website with a couple hundred links, and doesn't want to change them all, for both practical and bandwidth-reasons. Here is the script I came up with.
Added: 2005-09-18 15:33:09 - Modified: 2005-09-18 13:43:19 - Level: Beginner
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Open all links in a new window</title>
<script type="text/javascript">
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Open all links in a new window</title>
<script type="text/javascript">
This first part is just a general header for XHTML and declaring the start of a JavaScript block. Next we'll look at the function that actually open the link in a new window
function myopen()
{
window.open(this.href);
return false;
}
this should be fairly intuitive to anyone familiar with JavaScript, now, lets have a look at the function that tell the different links to execute the prior function
function myfunc()
{
var arr = document.getElementsByTagName("a");
var c = arr.length;
for(var i=0;i<c;i++)
{
arr[i].onclick=myopen;
}
}
now this is some more to detail, but in short, it just create an array arr that contain all links on the site. Then it loop through it and assign the .onclick=myopen to all of them
window.onload=myfunc;
This just tell the browser to execute the function myfunc, which in turn run the loop as described above. And then it follow just a simple HTML closing and some test links
</script>
</head>
<body>
<p>
<a href="http://www.kfwebs.net/#link1">link1</a>
<a href="http://www.kfwebs.net/#link2">link2</a>
<a href="http://www.kfwebs.net/#link3">link3</a>
<a href="http://www.kfwebs.net/#link4">link4</a>
<a href="http://www.kfwebs.net/#link5">link5</a>
<a href="http://www.kfwebs.net/#link6">link6</a>
</p>
</body>
</html>
This first part is just a general header for XHTML and declaring the start of a JavaScript block. Next we'll look at the function that actually open the link in a new window
function myopen()
{
window.open(this.href);
return false;
}
this should be fairly intuitive to anyone familiar with JavaScript, now, lets have a look at the function that tell the different links to execute the prior function
function myfunc()
{
var arr = document.getElementsByTagName("a");
var c = arr.length;
for(var i=0;i<c;i++)
{
arr[i].onclick=myopen;
}
}
now this is some more to detail, but in short, it just create an array arr that contain all links on the site. Then it loop through it and assign the .onclick=myopen to all of them
window.onload=myfunc;
This just tell the browser to execute the function myfunc, which in turn run the loop as described above. And then it follow just a simple HTML closing and some test links
</script>
</head>
<body>
<p>
<a href="http://www.kfwebs.net/#link1">link1</a>
<a href="http://www.kfwebs.net/#link2">link2</a>
<a href="http://www.kfwebs.net/#link3">link3</a>
<a href="http://www.kfwebs.net/#link4">link4</a>
<a href="http://www.kfwebs.net/#link5">link5</a>
<a href="http://www.kfwebs.net/#link6">link6</a>
</p>
</body>
</html>