2011年3月 2日 23:04

mailto:のリンクをjQueryで後から付ける(2)：リンクを踏んだ時メールソフトを起動するかどうか選べるように

スポンサードリンク

昨日の、

を書いた後気付いたんですけれども、僕が今作っているサイトって、hCardとかOpen Graphとかで盛大にメールアドレスをメタデータで公開しているサイトなので、メールアドレスの秘匿化するとか盛大に意味がなかったわけです。あと、せっかくmailto:のリンクを付けても、クリックしたら「メールソフトを起動しますか？（はい／いいえ）」のワンクッションがある方が好みです。

というわけで、昨日の、メールアドレスのところにa要素でmailto:のリンクを付けて、更にリンクを選んだ時、メールソフトを起動するかどうかを選べるようなのを書いてみました。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"
    ></script>
    <script type="text/javascript">
    $(function() {
      $('.email').each( function(){
          var text = $(this).text();
          text = text.replace(/\s/g,'');
          $(this).wrapInner('<a href="mailto:'+ text + '"></a>')
                 .click( function(){
                   return confirm('メールソフトを起動します。');
                 });
      });
    });
    </script>
  </head>
  <body>
    <p class="email">
      hoge@example.com
    </p>
  </body>
</html>

リンクを踏んだ時の動作は、return falseで打ち消すことができるわけで、confirmで表示されるダイアログは、OKだとtrue、キャンセルだとfalseになることを利用して、「メールソフトを起動するときにOKが選ばれる」ようなconfirmのコメントを入れとけばいいっていうわけですね。

2011.03.02 23:04 投稿　大野義貴 [Web] | 固定リンク |