接續前兩篇文章,從FancyBox到達申請表頁面後,對方要求可以透過(1)印表機列印申請表,(2)透過email寄送申請表。這篇文章小蛙要來說明怎麼透過JavaScript列印頁面以及用email寄送申請表,小蛙在處理mailto的時候遇到亂碼問題卡了一天,也會在這篇文章中說明。

  • JavaScript列印頁面

JavaScript列印頁面非常簡單,只需要一行就可以達成,更多詳細資料可以參考Javascript呼叫IE列印以及預覽列印的方法@小峰峰的筆記本

&lt;input type="button" onclick="<span style="color: #ff0000;"><strong>print()</strong></span>" value="列印申請表"&gt;
  • JavaScript寄送電子郵件

JavaScript寄送電子郵件指令也非常簡單,但是隱藏的問題其實還蠻多的,小蛙先介紹寄送電子郵件的指令。

<input type="button" onclick="sendMail(true);" value="使用Big5寄送(Outlook)">
<input type="button" onclick="sendMail(false);" value="使用UTF-8寄送">

小蛙用了sendMail()來讓使用者自行選擇要用哪種方式寄送等等再說明原因。JavaScript程式碼寄信程式碼如下,因為小蛙只用到簡單的寄件人、主旨及內容,更多詳細設定請參閱用mailto寄信 @ 螞蟻的HTML

<script type="text/javascript">
  // 基本寄信,沒有判斷編碼
  function sendMail(){
    var text_title = "這是一封透過JavsScript寄送的郵件主旨";
    var text_body  = "這是內文的部分。";
    sendmail = "mailto:[email protected]?subject=" + text_title;
    sendmail += "&body=" + text_body;
    location.href = sendmail;
  }
</script>

如果要用到換行的話,必須使用%0A。這個範例可能有些人跑起來是OK的,有些人卻得到亂碼,接下來小蛙要記錄一下自己的做法,也許有更好的做法,但時間緊迫只好先用這種特殊方式來解決。

  • JavaScript mailto 亂碼解決

目前小蛙找不到可以自動判斷要用什麼編碼的方法,也就是像上面的兩個按鈕,透過Big5寄送,或是透過UTF-8寄送,當小蛙以為就只有那麼簡單的時候又發現還要多一個條件判斷IE。Microsoft Outlook或Outlook Express會亂碼的原因是Outlook只能接受BIG5的編碼,但透過頁面location.href引導過去的參數會變成UTF-8,所以不管怎麼試只要編碼不是BIG5在Outlook就一定會出現亂碼,但又找不到方法可以判斷客戶端在點了按鈕之後所呼叫的是Outlook還是透過Webmail寄送,像小蛙的電腦點了之後會跳出瀏覽器,透過gmail送出郵件,而不是使用Outlook。

要確保送出的資料一定是用BIG5來編碼,在Java可以透過以下方式編碼。

java.net.URLEncoder.encode("一定要轉成BIG5編碼", "BIG5");

小蛙直接以自己的例子來說明,所有的頁面都是透過UTF-8編碼,包括使用者輸入的表單也是,這邊卡了一個問題是java.net.URLEncoder.encode()這個是Java的function,所以必須要在Server端才可以使用,也就是說使用者輸入完的資料沒有辦法直接透過java.net.URLEncoder.encode()來處理,這邊小蛙只好把所有的參數POST到另一頁sendMail.jsp專門處理亂碼及送出,以下是sendMail.jsp中Java編碼的部分。

String applyName = request.getParameter("applyName") == null ? "" : new String(request.getParameter("applyName").getBytes("ISO-8859-1"), "UTF-8");
String applyNameB = java.net.URLEncoder.encode("名稱:"   + applyName).replaceAll("[+]", " ");

編碼邏輯部分如下(以下是小蛙的dirty code,JavaScript跟Java夾雜,硬要分還是可以分的開,要怎麼處理就看自己的規畫囉!):

&lt;script type="text/javascript"&gt;
  var text_title = "&lt;%=title%&gt;";
&lt;%
  //也就是按下上面的「使用Big5寄送(Outlook)」
  if("true".equals(big5)){
%&gt;
      // 這邊無論是哪個瀏覽器都務必要使用 <span style="color: #ff0000;"><strong>big5</strong></span> 送出
      text_title = "&lt;%=title<span style="color: #ff0000;"><strong>B</strong></span>%&gt;";
      text_body  = "%0A" + ("&lt;%=applyName<span style="color: #ff0000;"><strong>B</strong></span>%&gt;");
      ....
&lt;%
  }else{
      if("IE".equals(browser)){
%&gt;
          // 如果瀏覽器是IE,還要額外做encodeURI處理
          text_title = <strong><span style="color: #ff0000;">encodeURI</span></strong>(text_title);
          text_body  = "<span style="color: #ff0000;"><strong>%0A</strong></span>" + <strong><span style="color: #ff0000;">encodeURI</span></strong>("名稱:&lt;%=applyName%&gt;");
          ....
&lt;%
      }else{
%&gt;
          // Firefox, Chrome直接傳送即可
          text_title = (text_title);
          text_body  = "<span style="color: #ff0000;"><strong>%0A</strong></span>" + ("物件名稱:&lt;%=applyName%&gt;");
&lt;%
      }
  }
%&gt;
  mail_str = "mailto:[email protected]?subject=" + text_title;
  mail_str += "&amp;body=" + text_body;
  location.href = mail_str;
&lt;/script&gt;

好吧!還有時間的話再來看看要不要把這些Code清乾淨一些…天啊!Web工程師最怕看到的應該就是亂碼,每次一遇到亂碼問題就會卡一段時間 … 還是希望瀏覽器的行為模式可以統一呀!上面的方法可以「手動」解決亂碼問題,讓使用者自己點選是否透過Outlook或是透過Webmail傳送,而在瀏覽器的特殊行為上小蛙也做了判斷,最有問題的IE特別隔離出來,希望之後能看到更好的做法><。

這方法有一些不足的地方
(1)程式碼太醜,Java跟JavaScript全都混在一起(剛上面提到可以拆的開!!!)
(2)沒辦法做到完全自動判斷,還要讓使用者點選
(3)小蛙只測試了IE8, FF7.0.1, Chrome 16.0.912.63
(4)如果使用者預設瀏覽器是IE,而透過非IE瀏覽器去點選寄送mail,有些情況可以,有些情況不行,這個部份處理起來真的沒完沒了,真正遇到再說了 = =

打完收工,繼續處理其他工作,希望可以不要抱著工作跨年。

相關文章

SSL For Free – 免費又有綠色鎖頭的 SSL Certificates

之前聽說 Google 會優先搜尋有 https 的網頁 (參考:
2016-07-07 23:00:54
hans

8

Android Vuforia with jPCT-AE (5) – 多重模型載入,以 obj 為例

要進到這系列最後一篇文章了,這篇文章拖了很久,一直沒有時間整理,結果到最後 ... 程式碼留下來了,記憶卻有些模糊了,這邊小蛙配著程式碼盡可能的把還記得的東西寫下來。
2016-07-06 11:24:19
hans

8

Android Vuforia with jPCT-AE (4) – 載入 3DS 測試

延續 jPCT-AE Loader 載入模型的部份,這篇要記錄載入 3ds 檔案格式的方法,基本上跟前面幾個 obj, md2 的方法差不多,只有一些小小的變化而已。
2016-07-06 10:24:33
hans

8

Android Vuforia with jPCT-AE (3) – 載入 md2 測試

前兩篇介紹如何直接透過 jPCT-AE 直接繪圖以及載入 .obj 檔案,這邊繼續介紹 jPCT-AE 載入 md2 的方法,載入動作大致上類似,唯一不同的只有 texture 設定部份。
2016-07-06 09:24:43
hans

8

Android Vuforia with jPCT-AE (2) – 載入 obj 測試

上一篇 Android Vuforia with jPCT-AE (1) –
2016-07-06 08:24:55
hans

8

Android Vuforia with jPCT-AE (1) – 基本範例

說來慚愧,從 Google Adsense 被 ban 之後,就好久沒有發文了,站上 Vuforia 的文章也已經是好久以前的事情了 (遠目),最近有專案要用到 Vuforia,爬以前的文回來看,蛙哩咧 ... 現在已經更新到 Vu
2016-07-06 07:57:58
hans

8

ClickForce (MobiForce) 當機問題

這真是個浪費時間又漫長的過程,CF 推出新版後台以及新版 SDK 的時候,小蛙就下載來測試,一開始小蛙直接套在「我的股票精算師」上,但只要一套上去就當機 ...
2015-09-02 10:32:51
hans

8

我的股票精算師備份功能

常遇到使用者詢問「我的股票精算師」要怎麼備份,這篇記錄一下,需要寫怎麼備份表示軟體設計上有很大的問題,造成使用者使用上的困難,但小蛙最近沒有時間去做修改 ... 只好委屈精算師的使用者了 ><
2015-02-06 18:32:07
hans

8

第一次從淘寶買小米盒子3

最近阿咕有在大螢幕上看韓劇的需求,剛好搭上 Chromecast 的上市,survey 了一些 Android 電視棒。這篇記錄這幾天的經過。

2015-01-04 23:36:33
hans

8




  一個回應 to “JavaScript列印頁面及mailto寄信亂碼”

 回覆

你可以使用以下語法 HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="">

(required)

(required)

   
© 2012 蛙齋 Suffusion theme by Sayontan Sinha