如何使用JavaScript的userAgent屬性判斷瀏覽器類型

判斷瀏覽器的類型我們可以使用JavaScript中提供的Navigator物件的userAgent屬性，它是唯一可以取得執行JavaScript 的瀏覽器類型和版本等資訊的屬性，使用簡單方便，但是如果做出錯誤的瀏覽器判斷順序則容易出錯，因此必須小心。

我們先來看看userAgent屬性的基本語法

window.navigator.userAgent;

透過這樣就可以獲得描述瀏覽器資訊的「字符串”作為傳回值。

重點是將資訊作為字串獲取到最後！

因此，有必要使用諸如indexOf()之類的方法在字元資訊中提取瀏覽器的類型和版本。

如何取得瀏覽器資訊？

讓我們建立一個實際取得瀏覽器類型的程式！

首先從userAgent屬性取得瀏覽器資訊開始。

//方法①
var agent = window.navigator.userAgent;
//方法②
var agent = window.navigator.userAgent.toLowerCase();

方法①和平常一樣使用userAgent屬性,不過，②最後執行的是toLowerCase()。

實際上，獲取的瀏覽器資訊是大寫和小寫字母的混合字串，因此基本上將它全部用小寫或大寫字母更容易判斷。

因此，一般來說，我會用方法②寫下來！

var agent = window.navigator.userAgent.toLowerCase();
var result = agent.indexOf('chrome') > -1;
console.log(result);

在這個例子中，使用了indexOf()確認取得了瀏覽器資訊「chrome」的文字是否存在。

如果沒有，則傳回“-1”，如果存在，則傳回“字元位置”。

因此，透過“> -1”的比較，可以得到“true / false”，所以可以進行判定。

瀏覽器的判斷

目前，有各種瀏覽器，例如“IE”，“Chrome”，“Safari”，“Firefox”為主流瀏覽器

讓我們看看如何判斷每個瀏覽器！

一般來說，基本上是透過IF語句依序判斷每個瀏覽器名稱。

var agent = window.navigator.userAgent.toLowerCase();
if(agent.indexOf('msie') > -1) { 
  console.log('IE浏览器'); 
} else if(agent.indexOf('edge') > -1) { 
  console.log('Edge浏览器');
} else if(agent.indexOf('chrome') > -1) {
  console.log('Chrome浏览器');
} else if(agent.indexOf('safari') > -1) {
  console.log('Safari浏览器');
} else if(agent.indexOf('firefox') > -1) {
  console.log('Firefox浏览器');
} else {
  console.log('其他浏览器');
}

在此範例中，使用userAgent取得瀏覽器訊息，並且indexOf()依序判斷每個瀏覽器名稱。

我們在開始時介紹了一點，但比較的順序是很重要的！

實際上，當您使用userAgent屬性檢查Edge瀏覽器時，它包含字元「chrome」和「safari」。

此外，請查看Chrome瀏覽器包含「safari」一詞。

這樣，有些情況下會包含與原始瀏覽器不同的名稱，因此有必要先比較要調查的瀏覽器。

基本上，至少讓我們保證「Edge」→「Chrome」→「Safari」的順序！

以上是如何使用JavaScript的userAgent屬性判斷瀏覽器類型的詳細內容。更多資訊請關注PHP中文網其他相關文章！