The target attribute with a value of “_blank” is usually used to tell the browser to open a new window / tab when a link is clicked. Unfortunately this attribute is not defined in XHML so it will cause the page to fail validation. To get around this we can use a small snippet of JavaScript and the onclick event handler to accomplish the task. Although this might sound like a difficult or confusing task, it is not.
First we need to define a script block in the html header block of the page. This block can be locate anywhere between the <head> tag and the </head> tag. and looks like this.
<script type=”text/javascript”>
</script>
Once we have this set up we have to create a javascript function to call with the event handler which we will get to in a minute. The function will be receiving 1 agument that needs to be processed. The function will look like this
function newWin(link) {
link.target=”_blank”;
}
Yup that is it. The whole function. Now to explain a little. The argument name I choose was link but could be any name you want it to be. Not to get you to confused I will not go into much detail about link being a javascript object for the link we define in the xhtml. The body of the function has one assignment command in it. We are assigning “_blank” to the links target attribute. Then we close off the function. the whole script block should look like this now.
<script type=”text/javascript”>
function newWin(link) {
link.target=”_blank”;
}
</script>
Now we go ahead and look at the anchor tag and building the link.
<a href=”http://reader.ws” onclick=”newWin(this)”>Click Here</a>
Try it out for yourself by Clicking Here
This is just a plain old anchor tag that points to my main page with the exception of the onclick handler. Simply put when you click on the link text “Click Here” it will open a new window /tab in your browser depending on how you have that set up. To explain, we simply call the newWin javascript function with the “this” argument. Now in case you are wondering what “this” means. It is used in object oriented programming languages to represent the current object. In this case the anchor tag.
As an Alternative way of setting up the link without the function in the header is to just put the javascript directly into the value of the onclick handler. If you decide to do it this way then you should add the “return true” statement to the end. The code will look like this <a onclick=”this.target=’_blank;return true’” href=”http://reader.ws”>Clicking Here</a> and you can try it by Clicking Here
That is all there is to it. You can set up as many links on the page you want like this and they will all work. I side note here. If you happen to have a javascript file linked to your page feel free to drop the function in there instead of in the html header block, as that will work just fine as long as the function is defined before you call it from a link you are in great shape.
If you like this tip feel free to leave a comment
