問題
問題描述
今天在做項目的時候，QA部門提了一個Bug，在一個搜索列表中，搜索欄為空時刷新頁面，卻觸發了搜索功能，並且列表顯示出<未搜索到結果>

環境
IE11

問題原因
QA的IE11用戶代理字符串使用了老版本，導致表單提交時，把搜索框中的屬性值placeholder字段傳入了後推斷。
導致搜索條件為<請輸入>
placeholder屬性在IE中，只有 IE11 支持
簡介
只有IE瀏覽器中才會有“瀏覽器模式”和“文檔模式”，兼容性視圖涉及兩個重要的功能便是“瀏覽器模式【browser mode】”和“文檔模式【document mode】”，在IE中按F12鍵，打開“開發人員工具”，在菜單欄中可以看到“瀏覽器模式”和“文檔模式”的切換菜單，其中可以選擇切換到IE7/8等不同的網頁模式。這個設置之後在js中可以通過navigator.userAgent獲得瀏覽器的版本，這個一般情況是與瀏覽器模式對應的，也可以通過Document.documentMode獲得瀏覽器的文檔模式，這個一般是與文檔模式相對應的。如果瀏覽器模式與文檔模式不一致的時候，我們一般認為還是以文檔模式為準【渲染頁面】。

<瀏覽器模式>和<文檔模式>之間有什麽區別呢？
“瀏覽器模式”用於切換IE針對該網頁的默認文檔模式、對不同版本瀏覽器的條件備註解析、發送給網站服務器的用戶代理（User-Agent）字符串的值。網站可以根據瀏覽器返回的不同用戶代理字符串判斷瀏覽器的版本和安裝的功能，這樣就可以向不同的瀏覽器返回不同的頁面內容。用開發人員工具切換瀏覽器模式時，文檔模式也會對應改變。

默認情況下，IE8的瀏覽器模式為IE8。用戶可以通過單擊地址欄旁邊的兼容性視圖按鈕來手動切換到不同的瀏覽器模式。在IE8中，IE8兼容性視圖會以IE7文檔模式來顯示網頁，同時會向服務器發送IE7的用戶代理字符串。

“文檔模式”用於指定IE的頁面排版引擎（Trident）以哪個版本的方式來解析並渲染網頁代碼。切換文檔模式會導致網頁被刷新，但不會更改用戶代理字符串中的版本號，也不會從服務器重新下載網頁。切換瀏覽器模式的同時，瀏覽器也會自動切換到相應的文檔模式。這個就是指定文檔模式為IE7，Trident會按照IE7模式去渲染頁面元素。

另外還有不同的，就是IE=7和IE=EmulateIE7，這兩個有什麽不同呢？IE=7是頁面按照IE7去渲染，不考慮DocType，而IE=EmulateIE7是以兼容IE7的模式去渲染，考慮DocType。當然還有更例外的情況，就是真正的IE7與IE9下添加了也有不同的情況，前幾天做瀏覽器兼容的時候就碰到過，那個只能到IE7瀏覽器下去調試了，並且要分析代碼的邏輯。

瀏覽器的用戶代理字符串 ———–
每個瀏覽器都有它自己的用戶代理（user agent）字符串，裏面包含了瀏覽器和操作系統等信息。通過使用這個字符串，我們可以處理跨瀏覽器的差異。用戶代理字符串保存在 JavaScript 的 navigator.userAgent 變量中。我們先來看看各個主流瀏覽器在各個平臺的用戶代理字符串的例子。

1. IE 和 IE Mobile 瀏覽器
系統平臺 瀏覽器 用戶代理字符串
Windows IE 9 Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Windows IE 10 Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)
Windows IE 11 Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
Windows Phone IE 10 Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)
2. Firefox 和 Firefox Mobile 瀏覽器
系統平臺 用戶代理字符串
Windows Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0.2) Gecko/20100101 Firefox/6.0.2
Android Mozilla/5.0 (Android; Mobile; rv:18.0) Gecko/18.0 Firefox/18.0
3. Opera 和 Opera Mobile 瀏覽器
在 Opera 12 及之前，使用的是 Presto 渲染引擎，它的 UA 字符串為：

系統平臺 用戶代理字符串
Windows Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.12
Android Opera/9.80 (Android 2.3.4; Linux; Opera Mobi/ADR-1301071546) Presto/2.11.355 Version/12.10
而從 Opera 14 開始，它改用 Chrome 的 WebKit/Blink 渲染引擎，UA 字符串改變為：

系統平臺 用戶代理字符串
Windows Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0 Safari/537.36 OPR/15.0
Android Mozilla/5.0 (Linux; Android 4.1.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0 Mobile Safari/537.36 OPR/16.0
4. Chrome 和 Chrome Mobile 瀏覽器
系統平臺 用戶代理字符串
Windows Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.57 Safari/537.17
Android Phone Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19
Android Tablet Mozilla/5.0 (Linux; Android 4.2; Nexus 7 Build/JOP40C) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Safari/535.19
Chrome OS Mozilla/5.0 (X11; CrOS armv7l 3428.193.0) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.126 Safari/537.22
iPhone* Mozilla/5.0 (iPhone; CPU iPhone OS 6_0_2 like Mac OS X; en-us) AppleWebKit/536.26 (KHTML, like Gecko) CriOS/23.0.1271.100 Mobile/10A551 Safari/8536.25
iPad* Mozilla/5.0 (iPad; CPU OS 5_1_1 like Mac OS X; zh-cn) AppleWebKit/534.46 (KHTML, like Gecko) CriOS/23.0.1271.100 Mobile/9B206 Safari/7534.48.3
註意 Chrome for iOS 聲稱它是 CriOS。這是由於它只能使用 iOS 的 UIWebView 提供的網頁渲染和腳本解釋引擎，和 Chrome for Android 差別很大，而更加像 Safari for iOS。

5. Safari 和 Safari Mobile 瀏覽器
系統平臺 用戶代理字符串
Windows Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
Macintosh Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10
iPhone Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7
iPad Mozilla/5.0 (iPad; CPU OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3
Android* Mozilla/5.0 (Linux; U; Android 2.3.4; zh-cn; SonyEricssonMT15i Build/4.0.2.A.0.62) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Mozilla/5.0 (Linux; U; Android 4.1.1; zh-cn; M040 Build/JRO03H) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
這裏的 Safari for Android 指的是 Android 自帶的瀏覽器；從用戶代理字符串看，不論 Android 的版本，它都聲稱是 Safari Mobile 4.0。實際上它和 Chrome 一樣也是從 Chromium 中移植出來的。

這裏順便整理並記錄各版本 iOS 系統自帶的 Safari Mobile 瀏覽器的版本，如下：

iPhone OS 1.0 iPhone OS 2.0 iPhone OS 3.0 iOS 4.0 iOS 4.3 iOS 5.0 iOS 6.0
Safari 3.0 Safari 3.1 Safari 4.0 Safari 4.0 Safari 5.0 Safari 5.1 Safari 6.0
6. 國內的各個瀏覽器
國內也有好幾個基於 WebKit 內核的瀏覽器（IE 內核的這裏不討論），它們的 user agent 字符串如下面的例子：

瀏覽器 用戶代理字符串
傲遊桌面瀏覽器 Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/533.9 (KHTML, like Gecko) Maxthon/3.0 Safari/533.9
傲遊移動瀏覽器 Mozilla/5.0 (Linux; U; Android 2.3.4; zh-cn; MT15i Build/4.0.2.A.0.62) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 Maxthon/4.0.3.3000
搜狗瀏覽器 Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.802.30 Safari/535.1 SE 2.X MetaSr 1.0
百度桌面瀏覽器 Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.7 (KHTML, like Gecko) Safari/534.7 Chrome/7.0 baidubrowser/1.x
百度移動瀏覽器 手機 UA：Mozilla/5.0 (Linux; U; Android 2.3.4; zh-cn; MT15i Build/4.0.2.A.0.62) AppleWebKit/533.1 (KHTML, like Gecko) FlyFlow/2.4 Version/4.0 Mobile Safari/533.1 baidubrowser/042_1.8.4.2_diordna_458_084/nosscirE-ynoS_01_4.3.2_i51TM/1000464b/174FA38EF54F67DF0EBC472658BA862B%7C101931900307210/1
電腦 UA：Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/531.1 (KHTML, like Gecko) FlyFlow/2.4 Version/5.0 Safari/531.1 baidubrowser/042_1.8.4.2_diordna_458_084/nosscirE-ynoS_01_4.3.2_i51TM/1000464b/174FA38EF54F67DF0EBC472658BA862B%7C101931900307210/1
360 極速瀏覽器 Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.1 (KHTML, like Gecko) Safari/535.1 Chrome/14.0.835.202 360EE
360 移動瀏覽器 Mozilla/5.0 (Linux; U; Android 2.3.4; zh-cn; MT15i Build/4.0.2.A.0.62) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1; 360browser(securitypay,securityinstalled); 360 Aphone Browser (3.2.1)
QQ 桌面瀏覽器 Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.36 (KHTML, like Gecko) Chrome/12.0.742.53 Safari/534.36 QQBrowser/6.5.9225.201
QQ 移動瀏覽器 中轉瀏覽：MQQBrowser/2.9/Adr (Linux; U; 2.3.4; zh-cn; MT15i Build/4.0.2.A.0.62;480*854)
直接瀏覽：MQQBrowser/2.9/Mozilla/5.0 (Linux; U; Android 2.3.4; zh-cn; MT15i Build/4.0.2.A.0.62) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
直接瀏覽：Mozilla/5.0 (iPad; U; CPU OS 4_3_5 like Mac OS X; zh-cn) AppleWebKit/533.17.9 (KHTML, like Gecko) MQQBrowser/3.1 Mobile/8L1 Safari/7534.48.3
UC 瀏覽器 Mozilla/5.0 (Linux; U; Android 2.3.4; zh-cn; MT15i Build/4.0.2.A.0.62) UC AppleWebKit/530+ (KHTML, like Gecko) Mobile Safari/530
可以看到大部分瀏覽器都兼容 Safari 或 Chrome 的 UA 字符串。但是還是有很多胡亂使用的地方。比如 UC 瀏覽器比較古怪（在 UC 8.2 for Android 2.3 中測試）：在 user agent 中竟然不包含自己的版本號。

7. navigator.platform
如果需要檢測用戶使用的操作系統，除了 navigator.userAgent 之外也可以用 navigator.platform。例如：

?
var platform = (function() {
var pl = navigator.platform;
if (pl.indexOf(‘Win‘) == 0) {
return ‘windows‘;
} else if (pl.indexOf(‘Mac‘) == 0) {
return ‘macos‘;
} else if (pl.indexOf(‘Linux‘) == 0 || pl.indexOf(‘X11‘) == 0) {
return ‘linux‘;
} else if (pl.indexOf(‘iPhone‘) == 0 || pl.indexOf(‘iPad‘) == 0) {
return ‘ios‘;
} else if (pl.indexOf(‘Android‘) == 0) {
return ‘android‘;
} else {
return ‘unknown‘;
}
})();
但是用 navigator.platform 判斷是否 Android 並不可靠。在一臺 Android 2.3 手機上測試，發現只有 Opera Mobile 給出 “Android” 的結果，Android browser 和 Firefox Mobile 都給出 “Linux armv7l”。
---------------------
作者：Sunny_Ran
來源：CSDN
原文：https://blog.csdn.net/sunny_ran/article/details/79321879
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

瀏覽器模式&用戶代理字符串(IE)