How to make external links exit HTML frames?

Generally, avoiding copy and paste is a great idea whether you are designing a web page or sending people on the moon.

A common problem with the badly constructed web sites relying on HTML frames is that external links are loaded within the frame which poses serious usability issues. A better solution is not to use frames, but sometimes, you are stuck with them. I had an argument recently with some people who insisted they had to add a “target=’_top'” attribute to all external links, in all pages.

Using the DOM API and JavaScript, you can easily add the correct target attribute to all external links without any copy and paste if you follow the convention that external links begin with “http”. Simply add the following within the “head” element of your web page:


<script type="text/javascript">
function externalLinks() {
var anchors = document.getElementsByTagName("a");
for(var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
var myurl = anchor.getAttribute("href");
if( ! myurl) continue;
if(myurl.indexOf("http") == 0) {
anchor.setAttribute("target","_top");
}
}
}
window.onload = externalLinks;
</script>

Of course, this relies on JavaScript being enabled, you might have cross-browser issues, and it adds an overhead to the processing of the page.

Published by

Daniel Lemire

A computer science professor at the Université du Québec (TELUQ).

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax