javascript基礎（BOM常用物件：navigtor,判斷瀏覽器的常用方法，和區分IE瀏覽器的方法）（三十九）

厚積薄發2017發表於2017-02-16
JavaScript物件瀏覽器

1.BOM物件簡介：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			
			/*
			 * BOM
			 * 	- 瀏覽器物件模型
			 * 	- 在BOM中為我們提供了一組物件，通過這些物件我們可以完成對瀏覽器的操作
			 * 		- window
			 * 			- 代表瀏覽器的視窗
			 * 		- navigator
			 * 			- 代表的瀏覽器的資訊，通過該物件可以來識別不同的瀏覽器
			 * 		- history
			 * 			- 代表的瀏覽器的歷史記錄，通過該物件可以控制瀏覽器向前或向後翻頁
			 * 		- location
			 * 			- 代表瀏覽器的位址列的資訊，通過該物件可以控制瀏覽器跳轉頁面
			 * 		
			 * 		- screen
			 * 			- 代表使用者的螢幕資訊
			 * 
			 * 		- 我們的BOM物件都是作為window物件的屬性儲存的，
			 * 			我們可以通過window物件來訪問
			 * 	
			 */
			
			//console.log(window.location);
			//console.log(navigator);
			
			/*
			 * navigator
			 * 	- 通過該物件可以判斷瀏覽器的資訊
			 * 	- 由於歷史原因Navigator中的大部分屬性都已經不能用來識別瀏覽器
			 * 	- 但是該物件中還有一個屬性叫做userAgent（使用者代理），還可以用來識別不同的瀏覽器
			 * 		userAgent實際上就是一個字串，不同的瀏覽器會有不同的userAgent，所以我們可以通過該屬性來判斷瀏覽器的版本
			 * 
			 *  - 火狐的UA
			 * 		Mozilla/5.0 (Windows NT 6.1; WOW64; rv:51.0) Gecko/20100101 Firefox/51.0
			 *  - chrome的UA
			 * 		Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
			 * 	- IE8
			 * 		Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
			 * 	- IE9
			 * 		Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
			 * 	- IE10
			 * 		Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
			 * 	- IE11
			 * 		Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
			 * 		- 在IE11的UserAgent中已經完全找不到微軟的印記了
			 */
			
			//alert(navigator.appName);
			
			var ua = navigator.userAgent;
			
			console.log(ua);
			
			//通過UserAgent來判斷瀏覽器的資訊
			if(/firefox/i.test(ua)){
				alert("你是火狐~~~");
			}else if(/chrome/i.test(ua)){
				alert("你是chrome瀏覽器~~~");
			}else if(/msie/i.test(ua)){
				alert("你是IE");
			}else if("ActiveXObject" in window){
				alert("你是IE11");
			}
			
			/*
			 * 可以通過一些IE瀏覽器中獨有的物件來判斷瀏覽器是否是IE
			 * 比如：ActiveXObject
			 * 	- 這個物件是一個建構函式，它是IE中用於傳送AJAX請求的物件，是IE中獨有的
			 */
			
			//alert(!!window.ActiveXObject);
			
			//alert("ActiveXObject" in window);
			
			/*if("ActiveXObject" in window){
				alert("你是IE~~~");
			}*/
			
			
		</script>
	</head>
	<body>
		
	</body>
</html>

相關文章