電子郵件簽名檔 HTML 手寫時的折騰（附原創工具）

時間 2019-11-11

原文原文鏈接

入職必修課

鄙人做爲碼農進廠開電腦的第一件正事就是 —— 在 Foxmail 客戶端中設置本身公司的域名郵箱，並加上看起來還挺專業的簽名檔。css

接收歡迎新人的郵件，選中老員工的簽名檔並複製粘貼到寫郵件設置中，修改我的信息並保存 —— 這彷佛很輕鬆，但…… 職位一處的文字稍長一些就顯示不全…… 旁邊那麼多空白居然不能自適應？！做爲一個前端程序猿，簡直不能忍 —— 改代碼！html

雖然 Foxmail 客戶端的富文本編輯器幾乎和 QQ郵箱同樣（本來也是同一個團隊的做品嘛），但居然不支持 HTML 格式化…… 還好在線代碼格式化工具不少。但格式化以後，代碼依然很爛 —— 各類樣式還用 HTML 4 的標籤屬性，style 屬性也是一坨一坨地堆着，姓名、職位、手機、電郵等居然還用 <input type="text" />……前端

Foxmail 本身加上去的全局樣式不是用 <style /> 寫在最前面嗎？這麼亂的代碼，哥怎麼有心情改？！寫個簡稱得了，管大家看不看得懂~git

收拾「舊河山」

倆月後，公司新產品上線，要在簽名檔已有的倆二維碼中間再加一個 —— 公司網管兄用 DreamWeaver 死活改很差，因而來找我幫忙…… 那就不客氣了 —— 直接用本身的 CSS 框架的佈局模塊來重寫，那叫一個暢爽~瀏覽器

寫完以後在瀏覽器裏測試完美，便即刻粘貼到 Foxmail 中 —— 樣式沒了？！微信

再嘗試用 Foxmail 郵件模板 —— 樣式又沒了？！前端工程師

只好用瀏覽器調試器一個一個元素地把外聯樣式填回 style 屬性中……微信公衆平臺

再試 Outlook —— 仍是沒樣式！連 DataURL 形式的圖片都叉了？！框架

前端猿的 Hack

最後只好登陸公司郵件服務的 Web 版，在帳號選項中設置簽名檔 —— 連 HTML 源碼編輯模式都沒了……編輯器

那就只能把新簽名檔源碼在瀏覽器中打開，再全選、複製、粘貼到郵件系統編輯框 —— 測試郵件基本正常，除了逼死強迫症的水平滾動條……（馬丹，這不在同事面前顯得我很沒水平？！）

仔細查看測試郵件的源代碼以後發現 —— 全部 style 的長度數值都從百分比變成了像素絕對值……

我想應該是瀏覽器等客戶端程序在複製 HTML 等富文本時把相對值轉換成了絕對值，能夠用下面的原創程序初步驗證 ——

<!-- lang: js -->
(function (BOM) {
    var isIE = !(! BOM.document.attachEvent);

    BOM.CB_getData = function (cType, CallBack) {
        var This = this,
            EM = isIE ?
                    ['attachEvent', 'onpaste', 'detachEvent'] :
                    ['addEventListener', 'paste', 'removeEventListener'];

        if (cType && (! isIE))  switch (cType.toLowerCase()) {
            case 'text':    cType = 'text/plain';    break;
            case 'url':     cType = 'text/unicode';  break;
            case 'html':    cType = 'text/html';     break;
        }
        This.document[ EM[cType ? 0 : 2] ](EM[1], function () {
            var PO = isIE ? This : arguments[0];
            var CBR = CallBack.call(
                isIE ? PO.srcElement : PO.target,
                PO.clipboardData.getData(cType)
            );
            if (! CBR)
                if (isIE)  PO.event.returnValue = false;
                else PO.preventDefault();
        }, isIE ? undefined : false);
    };
})(self);

//  粘貼事件發生時，回調函數的首個參數 將賦值爲 剪貼板中的內容
CB_getData('HTML', function (Content) {
    console.log(Content);
    return false;
});
//  返回 false 阻止瀏覽器 事件默認行爲，即不在用戶粘貼的地方輸出 剪貼板內容（同 jQuery）

網管小哥只好把瀏覽器窗口拉窄一些再複製粘貼 —— 至少看起來沒啥問題了……（但我知道在一些領導的輕薄筆記本、平板電腦等更窄的屏幕上還會溢出啊）

最後的最後 —— 在 Web 郵箱的簽名檔設置框中右擊打開調試器，直接編輯它的 HTML 文檔片斷，把簽名檔源碼粘貼進去再返回來保存 —— 發出來的測試郵件源碼完整保留了長度值的百分比原值~