問題
解決策
はじめに
メールアドレスを直接表示してしまうと、スパムなど、悪意の標的になる危険性があります。
なのでメールアドレスを別の文字列に変換してくれるサービスを使って、安全に表示させる方法をご紹介します。
メールアドレスを別の文字列に変換してくれるサービス
まず、このサービスにアクセスして、表示させたいメールアドレスを入力し、生成ボタンをクリックします。
するとこのようなソースを表示してくれます。
function secretaddress() {
var ma = String.fromCharCode( メールアドレスの変換コード );
var mt = String.fromCharCode( mailto:の変換コード );
document.write('<a href="'+ mt + ma + '">' + ma + '</a>');
}
今回の方法では、4行目のdocument.writeの部分は使用せず、jQueryのhtmlを使って表示させます。
表示用のjsファイルの作成
新規でjsファイルを作成し、先ほどのソースをコピー&ペーストして、少しソースをいじります。
表示用のクラスを決めておき、そのクラスが存在すればメールアドレスのリンクを表示するというスクリプトになります。
- ※今回は便宜上、maillinkという表示用クラスを設けておき、さらにサブとしてクラスを設けることで、サブのクラスによって表示するメールアドレスを変えられるようにしています。
$(function(){
// DEFAULT
var ma = String.fromCharCode(メールアドレスの変換コード );
var mt = String.fromCharCode(mailto:の変換コード );
if($('.maillink.default').length){ // classにmaillinkとdefaultを持つ要素が存在するならば
// classにmaillinkとdefaultを持つ要素内に、メールアドレスのリンクを挿入
$('.maillink.default').html('<a href="'+ mt + ma + '">' + ma + '</a>');
};
});
マークアップを行います。
マークアップはいたってシンプルです。
上記のmaillinkとdefaultをクラスとして設定すれば完了です。
<p>
<span class=“maillink default”>メールアドレス</span>
</p>
コメント