【实用工具】网页用户反馈/客服(E-Mail、QQ 等)
意见反馈(本地电邮软件)
HTML<form />
元素与mailto:
协议结合,使网页浏览器可以在submit
(表单提交)时打开用户电脑上的电邮客户端软件来发送邮件。电邮软件启动时,可以默认填写一些主要信息,这样就能让用户在大多数情况下只需点击“发送”即可与站务人员交流。
通常,反馈电邮的主题、收件人、抄送人都是定下就不变的(无需用户填写),而反馈的主要内容、用户基本信息却会多种多样,但只有 E-Mail 协议格式中的body
(正文)字段可以承载这些内容,这就需要我们在提交前自己整合各种自定义字段的内容。
把上述常用逻辑封装成插件不仅适用于调用本机电邮软件,也同样能适配第三方邮件发送 API,还能一次性绑定更多的提交事件回调、因用户操作焦点转移到另一窗口后的事件回调(为焦点切回来的用户一定的交互反馈)——
//
// jQuery.Mail_Form.js v0.2
//
(function (BOM, $) {
$.fn.Mail_Form = function (CB_Submit, CB_AppRun) {
return this.submit(function () {
var $_This = $(arguments[0].target), MoreInfo = [];
if (! $_This.is('form[action^="mailto:"]')) return;
var $_Mail_Body = $_This.find('textarea[name="body"]');
var BodyText = $.trim( $_Mail_Body.val() );
if (! BodyText) {
BOM.alert('Body Text of this Mail is Empty!');
return false;
}
MoreInfo.push( BodyText );
$_This.find('textarea:not([name="body"])').each(function () {
var Value = $.trim(this.value);
if (! Value) return;
MoreInfo.push([
'-----------',
['<h3>', (this.placeholder || this.title), '</h3>'].join(''),
Value
].join("\n"));
});
$_This.find('input, select').filter(function () {
var Type = (this.type in {
text: 1, number: 1,
search: 1, email: 1, url: 1,
radio: 1, checkbox: 1
}),
Name = (! (this.name in {
subject: 1, body: 1,
cc: 1, bcc: 1
})),
Value = $.trim(this.value);
return Type && Name && Value;
}).each(function () {
if (arguments[0] < 1)
MoreInfo.push("<hr />");
MoreInfo.push([
this.placeholder || this.title,
this.value
].join(' : '));
});
$_This.attr('enctype', 'text/html');
$_Mail_Body.val(
MoreInfo.join("\n\n").replace(/\n\n/g, "<br /><br />\n")
);
if (CB_Submit)
CB_Submit.call($_This[0], arguments[0]);
$(BOM).one('blur.Mail_Submit', function () {
$_Mail_Body.val( BodyText );
CB_AppRun && CB_AppRun.call(this, arguments[0]);
});
});
};
})(self, self.jQuery);
【示例代码】
// 支持“委托式”事件绑定
$('.Float_Layer_Wrapper').Mail_Form(
function CB_Submit(iEvent) {
// this 指向 触发 submit 的 form
},
function CB_AppRun(iEvent) {
// this 指向 原 window
}
);
【参考文章】
- http://www.dreamdu.com/xhtml/mailto/
- http://hi.baidu.com/prometheus2008/item/0518fa3475e592352f0f817d
在线客服(弹出 QQ 对话框)
function Open_QQ_MessageBox(QQ_UID) {
if (! QQ_UID) return false;
if (typeof QQ_UID != 'string')
QQ_UID = QQ_UID.toString();
top.open([
'http://wpa.qq.com/msgrd?v=3&exe=qq&menu=yes',
'&uin=', QQ_UID,
'&site=', top.document.title.split(' ').slice(-1)
].join(''));
}
【参考文章】