I wrote an article back in February about open external links in a new tab and I received a few emails regard of it. Open links in a new tab is quite controversial, as many articles said we should put user in control instead of enforce user to open link in a new tab. So I write this plugin to give user more choices instead of enforce them to open it in a new link.

Improvements
Open link in new tab using Javascript instead of target=”_blank”
Only target specific area
Add object(image, text…) in front or after the link
Decide the link or the prefix object you want to open in new windows.

Syntax

The syntax with default value:

$(ParentObj).extLinks({
	PrefixObj: "",
	PreOpen: "NewTab", //What happen when user click on the prefix object
	LinkOpen: "SameTab", //What happen when user click on the link
	PostObj: "",
	PostOpen: "NewTab", //What happen when user click on the post object
	Links: "external" // external, internal, all - Which link you're target
});

Examples

$("#Test").extLinks({PrefixObj: "<img src=\"newwindow.gif\" style=\"border:none\"/> "});

This function only scans all external links. If Visitors click on the Prefix Obj, it open in a new tab. If user click on the link itself, it will open in the same tab.

$("#Test").extLinks({Links:"internal", PostObj: "<img src=\"internallinks.gif\" style=\"border:none\" //>", PostOpen: "SameTab"; });

This function only scans all internal links. Visitors click on the link or the post Object, it will open the link in the same tab.

How to make it

In my scripts, almost every line has a comment to explain what it does. The best way to learn about this plugin is read the script with the comments. Hope this will help.

You should check out my old post: open external links in a new tab. It contains the basic selectors for all external links and how to make them open in a new window.

If you could find the correct selectors, everything would be really easy. I use these selectors to find internal and external links:
Internal: a[href^='/'],a[href*='"+location.hostname+"']
External: a[href*='http://']:not([href*='"+location.hostname+"'])

To add object in front of the link I use:

				$(this).find(Selector).each(function(){
					$(this).before("<a href= 	\""+$(this).attr("href")+"\" " + PreTarget + ">" + Args.PrefixObj + "");
				});