Take my blog for example. I have write big posts some times and place more links. I want the user to see the links to be opened in new windows as they are still reading my pages. If the link opened in the same page, then it will be a problem to go and come back and start reading from the position they were. That won't give good experience. I want them to be stayed on my blog page and open all the links in new window. So that user is always on my blog page and if they wants then they can move across pages. It's not bad at all.
How many ways are there to implement this?
1. Make all links in web page open in new window.
2. Only some part of the web page links will be opened in new window.
I have two options: Number 1,
Open all links on the web page in new window: Default HTML supports this.
Work around:
Add this line in the <head> tag of your HTML: <base target='_blank' />
If I make all links needs to be opened in new window then home link, navigation links, search everything will opened in new window and it will frustrate user that whatever you click on the link it will open in new window. Dozens of windows in user system if you click 10-12 links. Not a good idea.
Option 2: Only specific region anchor links open in new window. This looks promising and good. But, how to. For example, in my blog, I like to open the content links only in new window.
I have a parent for all content inside a div with id='content'. Now, my goal is to add some logic to open all links in new window which are under content only.
Work around:
Add the below javascript to the <head> tag of the HTML.
<script type='text/javascript'>
//<![CDATA[
window.onload = function () {
var links = document.getElementById('content').getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].setAttribute('target', '_blank');
}
}
//]]>
</script>
This small function will do the trick. So, on window load, we are finding all the links in the particular division then adding the target='_blank' attribute to it. So, I found this is the only best solution to achieve this.
Once you add this to your page, then you will see all links inside content will open in new window and all others in the same window. This working perfectly to me. Try it on my blog by clicking on some link in the content.
If you are Jquery lover, then this is JQuery version,
$('#content a[href^="http://"]').attr("target", "_blank");
Great advantage is for blogs. All blogs needs this as there are lot of external links and other links in content. This will be the best and suitable solution.
Thanks a lot,
ReplyDeleteIt works.
i used it in my website, hanaptayo.com, can i target it to other url with frameset like digg?
Ok, i have a little problem. I exported my WP blog in a new doc with a XML file just like its says to do, but when i went to edit it and place your option 2 in it with Notepad, i failed to see (i used the find option)the head font.
ReplyDeleteI did find, however, the script style one. What would you reccommend for me to try and do?
I have tried this post .But Unfortunately It is not working for me .
ReplyDeleteHi there,
ReplyDeleteTo get this working, the only thing which you needs to change here is, this line.
var links = document.getElementById('content').getElementsByTagName('a');
In your page, is there any HTML control with ID as "content"? The code is trying to find the element with id "content" and looping through it for anchor links. If your page dont have control with id "content" then please replace "content" with some other control id on the page. Then it should work.
Good luck.
Praveen.
How to find the document.getElementById, I don't know what is the document.getElementById
ReplyDeleteThe code document.getElementById() is the javascript code.
ReplyDelete<script type="text/javascript">
alert(document.getElementById('controlID'));
</script>
Hi Praveen - this works great thank you. I am not familiar with Java Script and have a question. In my case I have several div id's I would like to use this script for on the same html page but I have read that I can not have multiple ids within: var links = document.getElementById('content'). I repeated your code three times in my header for my 3 different div ids but when I tested - it only works for the last one (I believe each iteration redefines it). Do you have a suggestion for how I can apply this to three different div ids on the same html page? Is it possible to do this using a class instead of an id? Thank you for your time.
ReplyDelete