Accessible Javascript Links

Example 1

This 'A' element opens a page in a specific external window. It is designed so that it will work even when Javascript is disabled.

Notice that the popup function returns false and this is returned in the onclick handler. Returning false cancels the "default onclick action" of the element - which is to load another page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Accessible Javascript Links</title>
<script type='text/javascript'>
function popup(url, target)
{
  window.open(url, target);
  return false;
}
</script>
</head>
<body>

<p><a target='myDefPage'
      href='my_definition.html'
      onclick='return popup(this.href,this.target)'>Click Me</a>
</p>

</body>
</html>

Example 2

This is similar to Example 1 except this example removes the Javascript from the HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Accessible Javascript Links</title>
<script type='text/javascript'>
window.onload = function()
{
  var lnks = document.links;
  if (lnks) {
    for (var i = 0; i < lnks.length; ++i) {
      lnks[i].onclick = linkOnClick;
    }
  }
  /* You might wonder why I used document.links
     instead of getElementsByTagName(). You can
     use either - but document.links is extremely
     cross-browser :-)
  */
}
function linkOnClick()
{
  /* You can look at the href (or other properties)
     to see if you want to open it in a new window or not.
  */
  if (this.target.length) {
    return popup(this.href, this.target);
  }
  else {
    return true; // allow default action
  }
}
function popup(url, target)
{
  window.open(url, target);
  return false;
}
</script>
</head>
<body>

<p>
  <a target='myDefPage' href='my_definition.html'>Click Me</a>
</p>

</body>
</html>

Tech Support

Forum support is available at the X Library Support Forums.