首页 » 水哥专栏 » 【实用工具】网页用户反馈/客服(E-Mail、QQ 等)

【实用工具】网页用户反馈/客服(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
    }
);

【参考文章】

  1. http://www.dreamdu.com/xhtml/mailto/
  2. 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(''));
}

【参考文章】

  1. http://www.fangfa.net/html/business/business_showinfo_41.html
  2. http://www.cnblogs.com/w-y-f/archive/2012/05/30/2526475.html