由於最近公司接了許多銀行的簡訊系統的案子,所以開始會有瀏覽器版本的限制,通常銀行都只會使用IE進行瀏覽,但是往往會有相容性問題,為確保簡訊專案在各瀏覽器下運作正常,寫了一個Html Helper來確定瀏覽器的版本。
1. Html Helper 實作
Html Helper 在MVC的View 裡是個非常方便的工具,雖然有些人覺得用JavaScript寫比較方便,但是Html Helper可以實現較多後端的動作,例如可以進行檔案的讀寫、Config讀取等等的動作,雖然不太建議用Html Helper做太多的處理,以免影響到前端效能,接下來就簡單介紹要怎麼樣建立一個Html Helper。
A. 首先要先建立一個public的靜態類別
建立的同時記得要先參考 using System.Web.Mvc;
B. 再來建立一個靜態的擴充方法
C. 接著就可以在View上使用了
2. IE版本辨別
在Http Request 的Header會有一個User-Agent的欄位, User-Agent在Computer Science中定義為表使用者行為的軟體(軟體代理程式)所提供的對自己的一個識別元,而言之就是使用者用來瀏覽網頁的工具的代稱,所以我們可以利用它來判斷IE瀏覽器的版本,其欄位的定義為
User-Agent: Mozilla/[版本] ([系統及瀏覽器資訊]) [瀏覽器使用的平台] ([平台細節]) [擴充功能]
開頭的Mozilla是一種誰是開山大老的概念,原因是Mozilla首先提出支援接收含有Frame功能的網頁,後來微軟的IE也不甘示弱地跟上支援Frame功能,但是微軟等不及讓那網路管理者學習如何對IE發送含有Frame的網頁,所就就模仿Mozilla的User-Agent開頭為Mozilla/1.22,並將IE跟Mozilla完全相容,並說明我現在的瀏覽器是可以完全支援Mozilla1.22版,之後的瀏覽器也是有樣學樣跟著將User-Agent寫成可以支援Mozilla的哪個版本,所以雖然現在Mozilla已經比較少人用了,但是在User-Agent這個欄位還可以看到紀念Mozilla是開山元老的資訊。
在User-Agent的地個欄位就是用判斷瀏覽器版本資訊的欄位,下面是一個IE 11的User-Agent的例子:
User-Agent: Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
其中比較重要的欄位是Trident/7.0這個欄位,Trident是微軟排版引擎的名稱,其版本可以用來說明其IE版本,但是僅限於IE8以上,對應表如下:
Trident版本 | Internet Explorer版本 |
4.0 | 8 |
5.0 | 9 |
6.0 | 10 |
7.0 | 11 |
至於IE 7以前並沒有實際對應的Trident的版本,所以可以用其他方法來判斷,下面是一個IE 7的User-Agent範例,
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)
其中IE 7的User-Agent會多一個定義MSIE的欄位,其實就是Microsoft IE的縮寫,這裡就很明白的告訴你我是IE 7,所以判斷上很容易,至於IE 6之前的版本我也就不多說明了就可以用 MSIE來判斷其版本,但是以下是一個特殊的例子,
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0)
裡面寫著MSIE 7.0但是又有Trident/5.0的標記,這個例子是當使用者打開IE的相容性檢視的時候會呈現的User-Agent,我們必須先判讀Trident的版本在看他相容的IE版本(MSIE),這裡寫著Trident/5.0代表他是用IE 9進行相容性檢視,並且相容到IE 7的架構,所以以後如果是前端工程師就要注意,在IE版本判別時要看清楚有沒有開啟相容性檢視的功能,以下附上相容性檢視的設定圖,
3. 程式碼範例
最後就附上實作的程式碼:
public static int IEVersion(this HttpRequestBase value) { string ua = value.UserAgent; int version = 0; if (ua.Contains("Trident/7.0")) { version = 11; //compatible if (ua.Contains("MSIE 7.0")) { version = 11; //Fames Version //version = 7; } } else if (ua.Contains("Trident/6.0")) { version = 10; //compatible if (ua.Contains("MSIE 7.0")) { version = 10; //Fames Version //version = 7; } } else if (ua.Contains("Trident/5.0")) { version = 9; //compatible if (ua.Contains("MSIE 7.0")) { version = 9; //Fames Version //version = 7; } } else if (ua.Contains("Trident/4.0")) { version = 8; //compatible if (ua.Contains("MSIE 7.0")) { version = 8; //Fames Version //version = 7; } } else if (ua.Contains("MSIE 7.0")) version = 7; else version = 6; return version; }