Home / jQuery / Identify external links on a page

Identify external links on a page

In this trick we are going to use a pre-defined method to identify external links on a page. All identified external links are to be embedded with an image to be spotted.

The HTML Mark up

<ul id="links">
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<!-- External Link: -->
<li><a href="http://www.w3schools.com/">W3</a></li>
</ul>

Now let us mark the external link with an image using jQuery. We are going to perform this trick by using the keyword location.hostname which captures the base URL.

// Loop through all the links
$('#links a').each(function(){
if(this.hostname != location.hostname)
$(this).append('<img src="external.png" />');
});

You can possibly play with this trick by binding event listeners to the click, mouseover, etc showing a pop up, slide down and much more…

About Ashik

I am a Full Stack Developer and love to work on APIs and Apps. Hardcore lover of Ionic and Laravel <3

Check Also

Private chatroom using socket.io, NodeJS and MySQL

As I promised to write a tutorial on Private chatroom with MySQL DB in the …

Do you wan't to get notified?

I will not spam your inbox. I will only send email whenever I publish a new article or to share information about technology

You have Successfully Subscribed!