国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 如何用js檢測瀏覽器類型

如何用js檢測瀏覽器類型

來源:千鋒教育
發布人:qyf
時間: 2022-10-10 16:38:07 1665391087

  這個需求在前端開發當中是很常見的,大家都知道我們寫的js或css在瀏覽器中是有兼容問題的,當下雖然大家可能不用感受的IE6帶來的痛苦(別問我為什么是痛苦),但是你負責的項目本身就是政府、醫院之類的項目,這個時候還是得受兼容問題的困擾。

  解決方案一:老老實實的在寫html、css和js的時候就考慮兼容的問題,邊寫邊測試,完成后自然就是兼容的了。這就需要你下載各種瀏覽器,IE瀏覽器就用IETester測試(IETester是一個免費的Web瀏覽器調試工具 ),IETester的坑非常多,根本不準,真實IE6還是會出bug(哭),后面學乖了,安裝虛擬機,虛擬機里面裝XP,XP自帶了IE6,做好還用真的瀏覽器測試一下。這種方法花費的精力蠻多的,你自己搜索一下IE6/7/8的css兼容問題就明白了,所以還是用方法二吧。

  解決方案二:直接檢測瀏覽器類型和版本,給出提示信息,直接讓用戶不用IE打開就行,那就是讓用戶升級瀏覽器了,一勞永逸的方法。效果如下所示:

圖片25

  具體的實現方法也比較簡單,JavaScript 包含一個名為 Navigator 的對象 ,Navigator 包含了有關訪問者瀏覽器的信息,包括瀏覽器類型、版本等等 。Navigator對象里面含有兩個重要的屬性,appName (保存瀏覽器類型 ),appVersion (保存有瀏覽器的版本信息 )。下面我們用代碼來測試一下:

26

  上面例子中的 browser 變量存有瀏覽器的名稱,比如,非IE顯示"Netscape" 或者 IE顯示"Microsoft Internet Explorer" ,所以只能判別是IE還是非IE,如果你是想讓用戶不用IE瀏覽器,這樣也可以了。這里要注意一點,IE的版本號是有點問題的,IE4/5/6的版本號都是4.0,所以我們就可以做到:如果用戶使用的是IE6或以下版本,請用戶升級瀏覽器。

27

  當然,如果你想判別具體是哪種瀏覽器,那還得利用Navigator 的對象的userAgent屬性,比如:

  var userAgent = navigator.userAgent;

  console.log(userAgent);

  這里打印的是:Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:73.0) Gecko/20100101 Firefox/73.0 ,

  用火狐測試;只要我們判斷這段字符串里面包含Firefox就可以判斷當下我們就是用火狐瀏覽器了,同樣的方法我們可以用來檢測各個瀏覽器:

  function getBrowserType(){

  var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串

  var browser='unknown';

  if (userAgent.indexOf("IE")!=-1) {//字符串含有IE字段,表明是IE瀏覽器

  browser="IE";

  }else if(userAgent.indexOf('Firefox')!=-1){//字符串含有Firefox字段,表明是火狐瀏覽器

  browser="Firefox";

  }else if(userAgent.indexOf('OPR')!=-1){//Opera

  browser="Opera";

  }else if(userAgent.indexOf('Chrome')!=-1){//Chrome

  browser="Chrome";

  }else if(userAgent.indexOf('Safari')!=-1){//Safari

  browser="Safari";

  }else if(userAgent.indexOf('Trident')!=-1){//IE內核

  browser='IE 11';

  }

  return browser;

  }

  如果你還想進一步判斷IE瀏覽器的版本 ,比如:edge,ie11,10,9,8,7,6,5,4 ,代碼如下:

  // 獲取IE版本

  function IEVersion() {

  // 取得瀏覽器的userAgent字符串

  var userAgent = navigator.userAgent;

  // 判斷是否為小于IE11的瀏覽器

  var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;

  // 判斷是否為IE的Edge瀏覽器

  var isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11;

  // 判斷是否為IE11瀏覽器

  var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;

  if (isLessIE11) {

  var IEReg = new RegExp('MSIE (\\d+\\.\\d+);');

  // 正則表達式匹配瀏覽器的userAgent字符串中MSIE后的數字部分,,這一步不可省略!!!

  IEReg.test(userAgent);

  // 取正則表達式中第一個小括號里匹配到的值

  var IEVersionNum = parseFloat(RegExp['$1']);

  if (IEVersionNum === 7) {

  // IE7

  return 7

  } else if (IEVersionNum === 8) {

  // IE8

  return 8

  } else if (IEVersionNum === 9) {

  // IE9

  return 9

  } else if (IEVersionNum === 10) {

  // IE10

  return 10

  } else {

  // IE版本<7

  return 6

  }

  } else if (isEdge) {

  // edge

  return 'edge'

  } else if (isIE11) {

  // IE11

  return 11

  } else {

  // 不是ie瀏覽器

  return -1

  }

  }

  綜合上面的方法,我們就可以回到今天的主題啦,我們的需求是:如果用戶使用的是IE5/6/7/8,提示用戶升級或切換其他瀏覽器:

  第一步:聲明一個函數(可以判斷各個瀏覽器和版本)

  function getBroswerAndVersion(){//該函數可以判斷各種瀏覽器和版本,最厲害的版本

  var os = navigator.platform;

  var userAgent = navigator.userAgent;

  var info = "";

  var tempArray = "";

  //判斷瀏覽器版本

  var isOpera = userAgent.indexOf("Opera") > -1; //判斷是否Opera瀏覽器

  var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判斷是否IE瀏覽器

  var isEdge = userAgent.toLowerCase().indexOf("edge") > -1 && !isIE; //判斷是否IE的Edge瀏覽器

  var isIE11 = (userAgent.toLowerCase().indexOf("trident") > -1 && userAgent.indexOf("rv") > -1);

  if (/[Ff]irefox(\/\d+\.\d+)/.test(userAgent)) {

  tempArray = /([Ff]irefox)\/(\d+\.\d+)/.exec(userAgent);

  info += tempArray[1] + tempArray[2];

  } else if (isIE) {

  var version = "";

  var reIE = new RegExp("MSIE (\\d+\\.\\d+);");

  reIE.test(userAgent);

  var fIEVersion = parseFloat(RegExp["$1"]);

  if (fIEVersion == 7)

  { version = "IE7"; }

  else if (fIEVersion == 8)

  { version = "IE8"; }

  else if (fIEVersion == 9)

  { version = "IE9"; }

  else if (fIEVersion == 10)

  { version = "IE10"; }

  else

  { version = "0" }

  info += version;

  } else if (isEdge) {

  info += "Edge";

  } else if (isIE11) {

  info += "IE11";

  } else if (/[Cc]hrome\/\d+/.test(userAgent)) {

  tempArray = /([Cc]hrome)\/(\d+)/.exec(userAgent);

  info += tempArray[1] + tempArray[2];

  } else if (/[Vv]ersion\/\d+\.\d+\.\d+(\.\d)* *[Ss]afari/.test(userAgent)) {

  tempArray = /[Vv]ersion\/(\d+\.\d+\.\d+)(\.\d)* *([Ss]afari)/.exec(userAgent);

  info += tempArray[3] + tempArray[1];

  } else if (/[Oo]pera.+[Vv]ersion\/\d+\.\d+/.test(userAgent)) {

  tempArray = /([Oo]pera).+[Vv]ersion\/(\d+)\.\d+/.exec(userAgent);

  info += tempArray[1] + tempArray[2];

  } else {

  info += "unknown";

  }

  return info;

  }

  第二步:調用函數,得到的結果再判斷給用戶提示即可

  var bro = getBroswerAndVersion();//上面第一步封裝的函數,調用會得到一個返回值

  if(bro=="IE5" || bro=="IE6" || bro=="IE7" || bro=="IE8" ){

  alert("瀏覽器版本過低!請升級至IE9以上");//此處應該顯示一個漂亮的圖片,讓用戶覺得再不升級就是out了

  }

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT