2. 程式人生 > >認識Javascript中的navigator物件以及檢測瀏覽器型別和版本，獲取瀏覽器版本號，檢測客戶端作業系統

認識Javascript中的navigator物件以及檢測瀏覽器型別和版本，獲取瀏覽器版本號，檢測客戶端作業系統

阿新 • • 發佈：2019-01-20

Navigator物件包含了Web瀏覽器的基本資訊(如名稱，版本，作業系統等)

通過window.navigator方式可以引用該物件，並利用它的屬性讀取客戶端基本資訊

Navigator的5個主要屬性：

appName:Web瀏覽器的名稱

appVersion:瀏覽器的版本號和其他版本資訊

userAgent:瀏覽器在它的USER-AGENT HTTP標題中傳送的字串。該屬性包含appName,appVersion屬性的所有資訊

appCodeName:瀏覽器的程式碼名

platform:客戶瀏覽器所在的作業系統

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>navigator物件</title>
</head>

<body>
<script type="text/javascript">
var appname = navigator.appName;
var appversion = navigator.appVersion;
var useragent = navigator.userAgent;
var appcodename = navigator.appCodeName;
var platform = navigator.platform;
document.write(appname+"<br>"+appversion+"<br>"+useragent+"<br>"+appcodename+"<br>"+platform);
</script>
</body>
</html>

常用瀏覽器的檢測方法：

1.特徵檢測法

這個是針對要了解瀏覽器的具體哪一項資訊或者具體支援哪一項特定功能來決定的檢測方式。

非精確判斷，但卻最安全。我們只要知道它存在不存在就可以了。

打個比方，我們只要if(navigator.appName.indexOf("Netscape")!=-1){***}

而不要輸出具體的瀏覽器的名稱結果

2.字串檢測法

這種比較正規的了，雖然檢測瀏覽器的型號和型別很困難而且很容易出現誤差。

一、檢測瀏覽器的型別和版本：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>navigator物件</title>
</head>

<body>
<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase();
var info={
	ie:/msie/.test(ua)&&!/opera/.test(ua),
	op:/opera/.test(ua),
	sa:/version.*safari/.test(ua),
	ch:/chrome/.test(ua),
	ff:/gecko/.test(ua)&&!/webkit/.test(ua)
	};
(info.ie)&&alert("IE");
(info.ch)&&alert("Chrome");
(info.ff)&&alert("Firefox");
</script>
</body>
</html>

二、設計函式獲取IE版本號：

IE的版本眾多，伴隨著相容的問題的增多，我們也有需求來獲取IE版本的號，這樣在寫網頁的時候可以對不同的IE版本做響應的調整以呈現相同的效果，而避免了由相容導致的顯示的問題。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>navigator物件</title>
</head>

<body>
<script type="text/javascript">
function getIEVer()
{
	var ver = navigator.userAgent;//獲取使用者端的Web瀏覽器版本號
	var a= ver.indexOf("MSIE");//檢測特殊字串"MSIE"的位置，因為IE的版本資訊中總是會有MSIE的存在，這是共性
	if(a<0){return 0;}
	return parseFloat(ver.substring(a+5,ver.indexOf(";",a)));
}
alert(getIEVer());
</script>
</body>
</html>
剛才在IE11上試了一下，返回是0，然後alert(navigation.appVersion)發現出來的不再是之前的那種格式了，表示很無辜啊。只能用其他方法檢測IE11的版本號了。

三、檢測客戶端作業系統

var isWin = (navigator.userAgent.indexOf("Win")!=-1)

//如果是windows作業系統，則返回TRUE

其他的是"Mac","X11","Linux"分別是Macintosh,UNIX,Linux

相關推薦

JS如何判斷瀏覽器型別和詳細區分IE各版本瀏覽器

/* * 描述：判斷瀏覽器資訊 * 編寫：LittleQiang_w * 日期：2016.1.5 * 版本：V1.1 */ //判斷當前瀏覽型別 function BrowserType() { var userAgent =

認識Javascript中的navigator物件以及檢測瀏覽器型別和版本，獲取瀏覽器版本號，檢測客戶端作業系統

Navigator物件包含了Web瀏覽器的基本資訊(如名稱，版本，作業系統等) 通過window.navigator方式可以引用該物件，並利用它的屬性讀取客戶端基本資訊 Navigator的5個主要屬性： appName:Web瀏覽器的名稱 appVersion:瀏覽器的

認識Javascript中控制視窗大小的Screen和Window物件

Screen物件儲存了客戶的電腦螢幕資訊，這些資訊可以用來探測客戶端硬體的基本配置 Screen物件的基本屬性： availHight:顯示Web瀏覽器的螢幕可用高度，不包括Windows的工作列(重點是顯示屏而不是瀏覽器，這邊不要誤解，它只是只是瀏覽器可以用剩下多高的顯示

javascrip 內建物件 Navigator物件 以及 useragent 瀏覽器相關資訊

Navigator物件 Navigator 物件包含有關瀏覽器的資訊，通常用於檢測瀏覽器與作業系統的版本。 檢視瀏覽器的名稱和版本，程式碼如下: <script type="text/javascript"> var brows

JavaScript中this物件原理簡潔說明

今天看了阮一峰大神的部落格文章：JavaScript 的this原理，把糾結很久的this的指向終於理解清楚了 原文：http://www.ruanyifeng.com/blog/2018/06/javascript-this.html 現在來說說如何區分不同情況下的this物件指向，如下所示：

javascript中的物件轉陣列的方法

1. 物件沒有length屬性 2.Array.prototype.slice.call(obj)能將具有length屬性的物件轉成陣列，不帶length屬性的物件，只能宣告陣列去轉換 <!DOCTYPE html> <html lang

javascript中的name以及關鍵字

做表單驗證時，將name命名為變數“var name=document.getElementById("name");”,用谷歌瀏覽器 開啟頁面，還未輸入文字時檢測使用者名稱輸入文字長度，應該長度為0的，但是發現沒有什麼卵用，將變數名改為name1之後就好了。 這讓身為小白的我很好奇，

javascript中date物件,Date物件,時鐘案列,setInterval,setTimeout,定時器

javascript中date物件,Date物件,時鐘案列,setInterval,setTimeout,定時器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

javascript中document物件的知識點

javascript中document物件的知識點 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>javascript中document物件的知識點,雪豹軟體

JavaScript中this物件的繫結

呼叫一個函式將暫停當前函式的執行，傳遞控制權和引數給新函式。除了宣告時定義的形式引數，每個函式接受兩個附加的引數：this和arguments 。引數 this 在面向物件程式設計中非常重要，它的值取決於呼叫的模式。在JavaScript中一共有四種呼叫模式：方法呼叫模式、函式呼叫模式、構造器呼叫模

JavaScript中=、==、===以及!=、!==的區別與聯絡

JavaScript中=、==、===以及!=、!==的區別與聯絡   在JavaScript中，“=”代表賦值操作；“==”先轉換型別再比較，“===”先判斷型別，如果不是同一型別直接為false。其中“==”和“===”都可以用在布林表示式中，但兩者有很大的區別，下面對三者進行具體介紹：

JavaScript中Array物件中join（）方法的例子

//join()方法用於把陣列中的所有元素放入一個字串 //其中元素是通過指定的分隔符進行分割 var arr = new Array(3); arr[0] = "George"; arr[1] = "John"; arr[2] = "Thom

javaScript中的物件、BOM、DOM知識點總結

一、  什麼是javaScript物件？         物件是javaScript中最重要的API。         javaScript包含多種物件有：內建物件、外部物件（window物件、dom

通過和看JavaScript中window物件parent、self、top的區別

<frameset>、<frame>、 <!--iframe 是在html頁面內嵌入框架框架內可以連線另一個頁面--> <html> <head

JavaScript之Navigator物件（BOM）

Navigator Navigator包含了瀏覽器的資訊：瀏覽器的程式碼名、瀏覽器的名字、瀏覽器的版本資訊和平臺、執行瀏覽器的作業系統、指明瀏覽器是否啟用了cookie等。 Navigator的屬性 appCodeName appCodeName是一個只讀字串，它返回

JavaScript 中的物件包含同樣的屬性及相同的值，它們是相等的嗎？

    當然不是相等的。     原因：物件的比較並非值得比較：即使兩個物件包含同樣的屬性及相同的值，它們也是不相等的各個索引元素完全相同的兩個陣列也不相等。          var o = {x

JavaScript中String物件常見方法及屬性

JavaScript String物件簡介 在JavaScript，基本資料型別有Number型、String型、Boolean型、Undefined型、Null型、Function型等。 String物件就是和基本資料型別中的String型別相對應的Jav

JavaScript中原型物件的徹底理解

一、什麼是原型 原型是Javascript中的繼承的基礎，JavaScript的繼承就是基於原型的繼承。 1.1 函式的原型物件 ​ 在JavaScript中，我們建立一個函式A(就是宣告一個函式), 那麼瀏覽器就會在記憶體中建立

JavaScript中的物件複製(Object Clone)

JavaScript中並沒有直接提供物件複製(Object Clone)的方法。因此下面的程式碼中改變物件b的時候，也就改變了物件a。 a = {k1:1, k2:2, k3:3}; b = a; b.k2 = 4; 如果只想改變b而保持a不變，就需要對物件a進行復制。 用jQuery

javascript中Array物件的join()方法使用說明

join()方法將數中的所有元素連線起來，並返回為一個字串，它還允許指定在連線陣列元素時插入其間的任意字元。該方法僅有一個引數，即在元素之間插入的字串。此引數可選 指定要使用的分隔符，如果省略該引數，