html mailto(メール)実用化の話
2022-01-16 07:14:08
ご存知の通り、mailtoはWebデザイン・制作において非常に実用的なhtmlタグです。個人のホームページを持っている人の多くは、自分のメールアドレスをホームページの目立つところに書いておき、ウェブ閲覧者がmailtoで構成されたハイパーリンクをマウスでクリックすると、自動的に現在のコンピュータシステム上のデフォルトのメールクライアントソフト、例えば OutLook Express や Foxmail などがウェブブラウザで開かれるようにしたいのです。
ただし、mailtoイベント接続は、OSやメールクライアントによって扱いが異なるため、実際の適用には注意が必要です。
1. 基本的な構文
<a href=mailto:[email protected]>send email</a>
または
<form action="mailto:[email protected]">
</form>
パラメータの一覧です。
リンク文字列
<a href="mailto:[email protected]?subject=testtitle&[email protected]&body=this is body">send mail</a>。
フォーム方式
<form name='sendmail' action='mailto:[email protected]'>
<input name='cc' type='text' value='[email protected]'>
<input name='subject' type='text' value='testtitle'>
<input name='body' type='text' value='this is body'>
</form>
2. メールクライアントの違い
上記はmailtoの簡単な構文での応用ですが、実際にはブラウザに設定されているブラウザクライアントによって動作しない場合があります。
特に、本文の内容にhtml形式の記述がある場合は、この傾向が強くなります。
outlookはbodyのhtml文をそのまま表示するので(escape後のbodyのhtmlも同様)、outlook mailtoでbody内の文の改行をしたい場合はどうすればよいでしょうか? <br/> は効果的ではありません。改行として%0D文字を使用する必要があります。
foxmailは、bodyのhtml文に相当するものです。
もちろん、メールを送信するタイプのmailtoクライアントを実装する方法もあります。
function SendMail(filePath) {
var path = location.href.substring(0, location.href.lastIndexOf("/")) + filePath;
var outlookApp = new ActiveXObject("Outlook.Application");
var nameSpace = outlookApp.getNameSpace("MAPI");
var mailItem = outlookApp.CreateItem(0);
var mailto = "[email protected] ";
var mailBody= "<HTML><BODY><DIV><FONT color='red'>test this is body html</FONT> ;</DIV></BODY></HTML>";
mailItem.Subject = "test title";
mailItem.To = mailto;
mailItem.HTMLBody = mailBody;
if (path ! = "") {
mailItem.Attachments.Add(path);
}
mailItem.Display(0);
mailItem = null;
nameSpace = null;
outlookApp = null;
}
しかし、これには大きな欠点があります。outlookクライアントしかサポートしておらず、インターネットオプションで "安全であるとマークされていないActiveXコントロールの初期化とスクリプトを有効にするよう設定する必要があります"。
Addはメッセージに添付ファイルを追加するもので、添付ファイルがない場合はfilePathパラメータを削除することができます。
ccオブジェクトを追加する必要がある場合はmailItem.Ccを、暗黙のオブジェクトを追加する必要がある場合はmailItem.Ccを呼び出すことができます。
ただし、mailtoイベント接続は、OSやメールクライアントによって扱いが異なるため、実際の適用には注意が必要です。
1. 基本的な構文
<a href=mailto:[email protected]>send email</a>
または
<form action="mailto:[email protected]">
</form>
パラメータの一覧です。
<テーブル になります。 受信者(複数間で ;で分割) 件名 件名 cc Cc ビーシーシー ダークコピー 本体 内容(メールソフトによってはhtml形式の文に対応しているものもあります。)
パラメータは、ページ間で値が渡されるのと同じように、リンク文字列またはフォームとして渡されます。
リンク文字列
<a href="mailto:[email protected]?subject=testtitle&[email protected]&body=this is body">send mail</a>。
フォーム方式
コピーコード
コードは以下の通りです。
<form name='sendmail' action='mailto:[email protected]'>
<input name='cc' type='text' value='[email protected]'>
<input name='subject' type='text' value='testtitle'>
<input name='body' type='text' value='this is body'>
</form>
2. メールクライアントの違い
上記はmailtoの簡単な構文での応用ですが、実際にはブラウザに設定されているブラウザクライアントによって動作しない場合があります。
特に、本文の内容にhtml形式の記述がある場合は、この傾向が強くなります。
outlookはbodyのhtml文をそのまま表示するので(escape後のbodyのhtmlも同様)、outlook mailtoでbody内の文の改行をしたい場合はどうすればよいでしょうか? <br/> は効果的ではありません。改行として%0D文字を使用する必要があります。
foxmailは、bodyのhtml文に相当するものです。
もちろん、メールを送信するタイプのmailtoクライアントを実装する方法もあります。
コピーコード
コードは以下の通りです。
function SendMail(filePath) {
var path = location.href.substring(0, location.href.lastIndexOf("/")) + filePath;
var outlookApp = new ActiveXObject("Outlook.Application");
var nameSpace = outlookApp.getNameSpace("MAPI");
var mailItem = outlookApp.CreateItem(0);
var mailto = "[email protected] ";
var mailBody= "<HTML><BODY><DIV><FONT color='red'>test this is body html</FONT> ;</DIV></BODY></HTML>";
mailItem.Subject = "test title";
mailItem.To = mailto;
mailItem.HTMLBody = mailBody;
if (path ! = "") {
mailItem.Attachments.Add(path);
}
mailItem.Display(0);
mailItem = null;
nameSpace = null;
outlookApp = null;
}
しかし、これには大きな欠点があります。outlookクライアントしかサポートしておらず、インターネットオプションで "安全であるとマークされていないActiveXコントロールの初期化とスクリプトを有効にするよう設定する必要があります"。
Addはメッセージに添付ファイルを追加するもので、添付ファイルがない場合はfilePathパラメータを削除することができます。
ccオブジェクトを追加する必要がある場合はmailItem.Ccを、暗黙のオブジェクトを追加する必要がある場合はmailItem.Ccを呼び出すことができます。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン