Hide e-mail addresses from bots using jQuery : Your e-mail address hidden with jQuery?

I used to scramble email addresses embedded into web pages so the spam harvesters wouldn’t snag them by searching the source code for the mailto: tag. Then I came across this great and simple way of using JQuery’s Ajax functionality to do the trick.

Basically the concept is to summon the email address using an Ajax function so that it displays in the specified location on your web page. The email address itself is kept in a separate file. Therefore it’s not part of the source code that the spambots cruise through to snag email addresses. Here’s how it works:

First Step: The External File

This step is simple. Create an HTML page with only one item in the body section… the email address! That’s going to look like this:

<a href="mailto:email@mydomain.com">mailto:email@mydomain.com</a>
Step Two: The JQuery Code

This is also simple since it’s one function. Here’s the JQuery code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">		

	$(document).ready(function(){
		var content = $(".email");
		content.load("email_address.htm");
});

</script>

Let’s explain a little on how this is going to work within your page. The element we’re looking for in your target web page is the item with the .email class name. Once JQuery locates that it’s going to load the content in the parentheses which in this case is our external file that we named email_address.htm (code posted above). Essentially JQuery, as soon as the document is ready, finds the .email class item and loads that content into it. The location where this will be inserted can be located anywhere on your page. Here’s the HTML tag you will need for that to happen:

Step Three: The Target HTML

This is very simple. Place this tag where you want the email address to display:

<span class=”email”> </span>

JQuery will insert the email file between those two span tags and keep it out of the hands of those nasty spammers

More reference

spam got you down?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s