Webpage Coding
Example #4 JS Masked Email
The »previous example removed the CSS to an external sharable file and added the necessary metatags to make the page work properly on the Internet. Although the page is essentially correct it has an 'en clar' email address which can easily be harvested by a spam-spider.
Fortunately email addresses can be easily masked using some simple JavaScript.
The main change in this fourth example is to implement a solution to this problem. This has been discussed within the JavaScript pages of this site. This same solution has been applied here.
This involves adding a JavaScript function to the page as a
<script> element within the <head> and
a function call to replace the email address in the page footer section.
See below for more details and further improvements...
The full source code is shown below, »the page itself is here, and will open in another window.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Example Webpage #4</title>
<meta name="description" content="A good description of the page here..." />
<meta name="keywords" content="search,engine,keywords,in,here" />
<meta name="charset" content="ISO-8859-1" />
<meta name="author" content="Andy Belcher" />
<meta name="generator" content="Notetab" />
<meta name="copyright" content="Andy Belcher 2006 DandyWebDesign" />
<link rel="stylesheet" href="/css/simpleskel.css" type="text/css" />
<script type="text/javascript">
// Cloaked e mail mail-to: link
var domName = "dandylife.org";
function antiSpamMailTo(tN,tD,dA,sU) {
var aS = "@";if(!tN) {tN = "webmaster";}
var mT = "ma"+"ilt"+"o:";if(!tD) {tD = domName;}
var tA = tN+"@"+tD;if(!dA) {dA = tN+aS+tD;}
if(sU) {sU = "?s"+"ub"+"ject="+sU;} else {sU = "";}
document.write("<a href=\""+mT+tA+sU+"\" title=\"Send ema"+"il...\">"+dA+"</a>");
}
//</script>
</head>
<body>
<div id="frame">
<div id="header">
<h1>Example Webpage</h1>
</div><!--header-->
<div id="content">
<div id="rightbar">
Site Links
<div class="navbar">
<a href="./simpleskel4.shtml#link" title="Return to the example notes page..."
>Link to Notes</a>
<a href="./example1.shtml#link" title="View the first example page - raw..."
>Example #1</a>
<a href="./example2.shtml#link" title="View the second example page - CSS tidied away - content separated from style..."
>Example #2</a>
<a href="./example3.shtml#link" title="View the third example page - External CSS and page metadata added..."
>Example #3</a>
<a href="./example4.shtml#link" title="View the fourth example page - Email addresses masked using JavaScript..."
>Example #4</a>
<a href="./example5.shtml#link" title="View the fifth example page - Code sharing using server-side includes..."
>Example #5</a>
<a href="./example6.shtml#link" title="View the sixth example page - Testing for DHTML and 'advanced' support..."
>Example #6</a>
</div><!--navbar-->
More text here in the sidebar
</div><!--rightbar-->
<h2>Example #4</h2>
<p class="loud">Welcome line - hello visitor etc etc</p>
<p>Mary had a little lamb, its fleece was white as snow, and everywhere that Mary went that lamb was sure to go... Mary had a little lamb, its fleece was white as snow, and everywhere that Mary went that lamb was sure to go...</p>
<p>Some more website content here</p>
</div><!--content-->
<div id="footer">Footer section code and credits here... Email:
<script type="text/javascript">
antiSpamMailTo('fred','nowhere.com');//</script>
</div><!--footer-->
</div><!--frame-->
</body>
</html>
Hidden Email Function Notes
This is actually a fairly straight forward way to do things, a simple JavaScript function despite the obfuscation within the code to make the strings 'email', 'mailto:' and 'subject' as hard to find for automated routines as possible.
However this is only a half measure which we can improve on. The code itself is clearly visible within the page and is not sharable with other pages.
The solution is exactly the same as for the CSS, remove the code to an externally sourced file which can be shared by all of the pages within your website which use it.
This same file can be used to add any other JS functions which you intend to use within your site, in the following example the file that has been included is the common JS file for this website which is discussed in detail in the 'Javascript Shared Code' page.
The file is included by removing the content of the
<script> to an external file and replacing it with the
following...
<script type="text/javascript" src="/src/common.js">//</script>
...
</head>
This has been done for the next example... where we will also look at the remaining issues:
- Code is not easily shared or maintained between pages
- Support for DHTML and 'advanced' features?