低版本瀏覽器（chrome小於40 firefox小於50 ie小於9）會提示升級資訊

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

window.onload=function(){

  var browserInfo1 = function (userAgent) {
      var u = userAgent || navigator.userAgent;
      var self = this;
      var match = {
          //核心
          'Trident': u.indexOf('Trident') > 0 || u.indexOf('NET CLR') > 0,
          'Presto': u.indexOf('Presto') > 0,
          'WebKit' 
: u.indexOf('AppleWebKit') > 0,
          'Gecko': u.indexOf('Gecko/') > 0,
          //瀏覽器
          'Safari': u.indexOf('Safari') > 0,
          'Chrome': u.indexOf('Chrome') > 0 || u.indexOf('CriOS') > 0,
          'IE': u.indexOf('MSIE') > 0 || u.indexOf('Trident') > 0,
          'Edge' 
: u.indexOf('Edge') > 0,
          'Firefox': u.indexOf('Firefox') > 0,
          'Opera': u.indexOf('Opera') > 0 || u.indexOf('OPR') > 0,
          'Vivaldi': u.indexOf('Vivaldi') > 0,
          'UC': u.indexOf('UC') > 0 || u.indexOf(' UBrowser') > 0,
          'QQBrowser': u.indexOf('QQBrowser' 
) > 0,
          'QQ': u.indexOf('QQ/') > 0,
          'Baidu': u.indexOf('Baidu') > 0 || u.indexOf('BIDUBrowser') > 0,
          'Maxthon': u.indexOf('Maxthon') > 0,
          'LBBROWSER': u.indexOf('LBBROWSER') > 0,
          '2345Explorer': u.indexOf('2345Explorer') > 0,
          'Sogou': u.indexOf('MetaSr') > 0 || u.indexOf('Sogou') > 0,
          'Wechat': u.indexOf('MicroMessenger') > 0,
          'Taobao': u.indexOf('AliApp(TB') > 0,
          'Alipay': u.indexOf('AliApp(AP') > 0,
          'Weibo': u.indexOf('Weibo') > 0,
          'Suning': u.indexOf('SNEBUY-APP') > 0,
          'iQiYi': u.indexOf('IqiyiApp') > 0,
          //作業系統平臺
          'Windows': u.indexOf('Windows') > 0,
          'Linux': u.indexOf('Linux') > 0,
          'Mac': u.indexOf('Macintosh') > 0,
          'Android': u.indexOf('Android') > 0 || u.indexOf('Adr') > 0,
          'WP': u.indexOf('IEMobile') > 0,
          'BlackBerry': u.indexOf('BlackBerry') > 0 || u.indexOf('RIM') > 0 || u.indexOf('BB') > 0,
          'MeeGo': u.indexOf('MeeGo') > 0,
          'Symbian': u.indexOf('Symbian') > 0,
          'iOS': u.indexOf('like Mac OS X') > 0,
          //移動裝置
          'Mobile': u.indexOf('Mobi') > 0 || u.indexOf('iPh') > 0 || u.indexOf('480') > 0,
          'Tablet': u.indexOf('Tablet') > 0 || u.indexOf('iPad') > 0 || u.indexOf('Nexus 7') > 0
      };
      if (match.Mobile) {
          match.Mobile = !(u.indexOf('iPad') > 0);
      }
      //基本資訊
      var hash = {
          engine: ['WebKit', 'Trident', 'Gecko', 'Presto'],
          browser: ['Safari', 'Chrome', 'IE', 'Edge', 'Firefox', 'Opera', 'Vivaldi', 'UC', 'QQBrowser', 'QQ', 'Baidu', 'Maxthon', 'Sogou', 'LBBROWSER', '2345Explorer', 'Wechat', 'Taobao', 'Alipay', 'Weibo', 'Suning', 'iQiYi'],
          os: ['Windows', 'Linux', 'Mac', 'Android', 'iOS', 'WP', 'BlackBerry', 'MeeGo', 'Symbian'],
          device: ['Mobile', 'Tablet']
      };
      self.device = 'PC';
      self.language = (function () {
          var g = (navigator.browserLanguage || navigator.language);
          var arr = g.split('-');
          if (arr[1]) {
              arr[1] = arr[1].toUpperCase();
          }
          return arr.join('-');
      })();
      for (var s in hash) {
          for (var i = 0; i < hash[s].length; i++) {
              var value = hash[s][i];
              if (match[value]) {
                  self[s] = value;
              }
          }
      }
      //系統版本資訊
      var osVersion = {
          'Windows': function () {
              var v = u.replace(/^.*Windows NT ([\d.]+);.*$/, '$1');
              var hash = {
                  '6.4': '10',
                  '6.3': '8.1',
                  '6.2': '8',
                  '6.1': '7',
                  '6.0': 'Vista',
                  '5.2': 'XP',
                  '5.1': 'XP',
                  '5.0': '2000'
              };
              return hash[v] || v;
          },
          'Android': function () {
              return u.replace(/^.*Android ([\d.]+);.*$/, '$1');
          },
          'iOS': function () {
              return u.replace(/^.*OS ([\d_]+) like.*$/, '$1').replace(/_/g, '.');
          },
          'Mac': function () {
              return u.replace(/^.*Mac OS X ([\d_]+).*$/, '$1').replace(/_/g, '.');
          }
      }
      self.osVersion = '';
      if (osVersion[self.os]) {
          self.osVersion = osVersion[self.os]();
      }
      //瀏覽器版本資訊
      var version = {
          'Chrome': function () {
              return u.replace(/^.*Chrome\/([\d.]+).*$/, '$1');
          },
          'IE': function () {
              var v = u.replace(/^.*MSIE ([\d.]+).*$/, '$1');
              if (v == u) {
                  v = u.replace(/^.*rv:([\d.]+).*$/, '$1');
              }
              return v != u ? v : '';
          },
          'Edge': function () {
              return u.replace(/^.*Edge\/([\d.]+).*$/, '$1');
          },
          'Firefox': function () {
              return u.replace(/^.*Firefox\/([\d.]+).*$/, '$1');
          },
          'Safari': function () {
              return u.replace(/^.*Version\/([\d.]+).*$/, '$1');
          },
          'Opera': function () {
              return u.replace(/^.*Opera\/([\d.]+).*$/, '$1');
          },
          'Vivaldi': function () {
              return u.replace(/^.*Vivaldi\/([\d.]+).*$/, '$1');
          },
          'Maxthon': function () {
              return u.replace(/^.*Maxthon\/([\d.]+).*$/, '$1');
          },
          'QQBrowser': function () {
              return u.replace(/^.*QQBrowser\/([\d.]+).*$/, '$1');
          },
          'QQ': function () {
              return u.replace(/^.*QQ\/([\d.]+).*$/, '$1');
          },
          'Baidu': function () {
              return u.replace(/^.*BIDUBrowser[\s\/]([\d.]+).*$/, '$1');
          },
          'UC': function () {
              return u.replace(/^.*UC?Browser\/([\d.]+).*$/, '$1');
          },
          '2345Explorer': function () {
              return u.replace(/^.*2345Explorer\/([\d.]+).*$/, '$1');
          },
          'Wechat': function () {
              return u.replace(/^.*MicroMessenger\/([\d.]+).*$/, '$1');
          },
          'Taobao': function () {
              return u.replace(/^.*AliApp\(TB\/([\d.]+).*$/, '$1');
          },
          'Alipay': function () {
              return u.replace(/^.*AliApp\(AP\/([\d.]+).*$/, '$1');
          },
          'Weibo': function () {
              return u.replace(/^.*weibo__([\d.]+).*$/, '$1');
          },
          'Suning': function () {
              return u.replace(/^.*SNEBUY-APP([\d.]+).*$/, '$1');
          },
          'iQiYi': function () {
              return u.replace(/^.*IqiyiVersion\/([\d.]+).*$/, '$1');
          }
      };
      self.version = '';
      if (version[self.browser]) {
          self.version = version[self.browser]();
      }
  };
  var browserInfo = new browserInfo1();
  var uDivContent = document.createElement('div');
  var uDivWarp = document.createElement('div');
  var uDivContentHTML = '<div style="color:#F68c28;font-size:12px;padding:10px 20px"><span id="closeBtn" style="float:right;font-size:20px;font-family:simsun;text-decoration:none;margin:-8px -15px 0 0;color:#333">脳</span><b style="font-size:14px;">溫馨提示：</b><p>您當前的瀏覽器版本過低，可能存在安全風險，請升級瀏覽器，並設定新安裝的瀏覽器為預設瀏覽器</p ></div><ul style="text-align:center;margin:0 auto;font-size:12px;overflow:hidden;padding:0 45px;list-style: none;"><li style="float:left;width:50%;"><img src="//www.firefox.com.cn/media/img/logos/firefox/logo-quantum-high-res.cfd87a8f62ae.png" width="55" height="55" style="margin:0 auto" /><a href="//www.firefox.com.cn/" target="_blank" style="display:block;margin:10px auto 0;width:90px;height:24px;line-height:24px;background:#da5c38;color:#fff;text-decoration:none;">火狐瀏覽器</a></li><li style="float:left;width:50%"><img src="//www.google.cn/chrome/static/images/fallback/chrome-logo.png" width="55" height="55" style="margin:0 auto" /><a href="//www.google.cn/chrome/" target="_blank" style="display:block;margin:10px auto 0;text-decoration:none;width:90px;height:24px;line-height:24px;background:#89c127;color:#fff;">谷歌瀏覽器</a></li></ul>'
  uDivContent.id = 'uDivContent'
  uDivWarp.id = 'uDivWarp'
  if (browserInfo.browser === "IE" && Math.floor(Number(browserInfo.version))<8)  {
      uDivWarp.style.position = 'absolute';
      uDivWarp.style.width = '100%';
      uDivWarp.style.height = '100%';
      uDivWarp.style.backgroundColor = '#fff';
      uDivWarp.style.opacity = '0.1';
      uDivWarp.style.left = '0';
      uDivWarp.style.top = '0';
      uDivWarp.style.zIndex = '1000';
      uDivContent.style.position = 'absolute';
      uDivContent.style.width = '400px';
      uDivContent.style.height = '210px';
      uDivContent.style.backgroundColor = '#fff';
      uDivContent.style.border = '1px solid #e0e0e0';
      uDivContent.style.left = '50%';
      uDivContent.style.top = '50%';
      uDivContent.style.marginTop = '-100px';
      uDivContent.style.marginLeft = '-200px';
      uDivContent.style.zIndex = '1001';
      uDivContent.innerHTML = uDivContentHTML;
      document.getElementsByTagName('body')[0].appendChild(uDivWarp);
      document.getElementsByTagName('body')[0].appendChild(uDivContent);   
  }else if((browserInfo.browser === "Chrome" && Math.floor(Number(browserInfo.version.substring(0,2)))<40) || (browserInfo.browser === "Firefox" && Math.floor(Number(browserInfo.version))<50) || (browserInfo.browser === "IE" && Math.floor(Number(browserInfo.version)) === 8)){
      uDivWarp.style.position = 'fixed';
      uDivWarp.style.width = '100%';
      uDivWarp.style.height = '100%';
      uDivWarp.style.backgroundColor = '#fff';
      uDivWarp.style.opacity = '0.1';
      uDivWarp.style.left = '0';
      uDivWarp.style.top = '0';
      uDivWarp.style.zIndex = '1000';
      uDivContent.style.position = 'fixed';
      uDivContent.style.width = '400px';
      uDivContent.style.height = '210px';
      uDivContent.style.backgroundColor = '#fff';
      uDivContent.style.border = '1px solid #e0e0e0';
      uDivContent.style.left = '50%';
      uDivContent.style.top = '50%';
      uDivContent.style.marginTop = '-100px';
      uDivContent.style.marginLeft = '-200px';
      uDivContent.style.zIndex = '1001';
      uDivContent.innerHTML = uDivContentHTML;
      document.getElementsByTagName('body')[0].appendChild(uDivWarp);
      document.getElementsByTagName('body')[0].appendChild(uDivContent);
  }
  document.getElementById("closeBtn").onclick = function(){
      document.getElementById('uDivContent').style.display = 'none'
      document.getElementById('uDivWarp').style.display = 'none'
  }  
}

低版本瀏覽器（chrome小於40 firefox小於50 ie小於9）會提示升級資訊

window.onload=function(){ var browserInfo1 = function (userAgent) { var u = userAgent || navigator.userAgent; var se

從 ie10瀏覽器下Symbol 未定義的問題探索vue專案如何相容ie低版本瀏覽器（ie9, ie10, ie 11 ）

問題： vue專案在ie11下一片空白並報Symbol 未定義的錯原因： ie10瀏覽器解析不了es6的語法，需要我們使用babel（Babel是一種工具鏈，主要用於將ECMAScript 2015+程式碼轉換為當前和舊版瀏覽器或

解決html5新標簽 placeholder 低版本瀏覽器下不兼容問題

解決 html5 新標簽 placeholder屬性是HTML5 中為input添加的。在input上提供一個占位符，文字形式展示輸入字段預期值的提示信息（hint），該字段會在輸入為空時顯示。實例:1 <input type="text" name="userName" placehold

谷歌瀏覽器（Chrome）禁止瀏覽器緩存設置

cut vfl 谷歌瀏覽器 eba rdl jre sdp net mta 在開發項目期間用谷歌瀏覽器調試，他總是緩存我的css樣式這個很氣人啊，後經過摸索找到了方法，如下先F12或者shift+ctrl+j 打開調試者工具，在找Network這個tab按鈕，點擊進入，

webpack4與babel配合使es6程式碼可運行於低版本瀏覽器

使用es6+新語法編寫程式碼，可是不能運行於低版本瀏覽器，需要將語法轉換成es5的。那就藉助babel7轉換，再加上webpack打包，實現程式碼的轉換。轉換包括兩部分：語法和API let、const這些是新語法。 new promise()等這些是新API。簡單程式碼類庫 utils.js cons

關於vue專案在低版本瀏覽器中不支援ES6的解決方案

原因：低版本瀏覽器核心版本太低，無法解析 ES2015最新的一些語法。 babel是一個轉譯器，把同種語言的高版本規則翻譯成低版本規則一般搭建專案時webpack會在最外層配置一個.babelrc檔案用於預設解析ES2015（es6）中的特殊語法（例如： le

html5相容低版本瀏覽器

在JS程式碼中加入 <script type="text/javascript">document.createElement('header'); document.createElement('nav'); document.createElement('

整理IE低版本瀏覽器的bug

IE6雙倍距的問題問題：當浮動元素設定margin邊距時，邊距會加倍。解決方法：是給浮動元素加上display：inline屬性 IE6圖片下方有空間隙問題：圖片的下方預設的空隙解決方案：給img設定 display:block屬性 IE63畫素偏移BUG

React+Webpack+Antd+Babel 相容低版本瀏覽器(下)

回顧起因某天，某測試說：“這個頁面在 IE8 下白屏，9也白。。”某前端開發: 吭哧吭哧。。。一上午的時間就過去了，搞定了。第二天，某測試說：“IE 又白了。。”某前端開發: 嘿咻嘿咻。。。誰用的 Object.assign，出來我保證削不屎你。在上篇，我們主要丟擲了兩個問題

.finally is not a function —— 解決低版本瀏覽器axios不支援finally

框架專案用axios呼叫介面時，我們常用：介面名().then(result=>{ do sth... }).catch(()=>{ do sth... }).finally

ES6 + Webpack + React + Babel 如何在低版本瀏覽器上愉快的玩耍(下)

針對ie8等低版本瀏覽器document.getElementsByName方法不生效解決方法

function getByName(Name){　　var i = document.getElementsByName(Name);　　if(i>0){　　　　return i;　　}else{　　　　var aele = document.getElements

Vue 中使用 babel-polyfill 來相容低版本瀏覽器

文章目錄報錯示例背景知識原因解決方案Tip 報錯示例使用了 Vue 以及用 axios 來發請求，在谷歌瀏覽器上面，預覽是沒有問題的：（下圖中紅色內容，是我調介面獲取到的內容，然後顯示在頁面上）但是在 IE 瀏覽器下，卻沒有看到介面獲取的內容顯示在頁面上

IE8及低版本瀏覽器不支援CSS3 media queries的解決方法

最近在解決UI問題時碰到以下瀏覽器不相容性問題（本人屬於UI業餘操作者，很多想法就很業餘了）：問題：IE8及其以下低版本IE瀏覽器在縮小視窗時，UI沒有按照相應的要求顯示視窗縮小時對應的佈局；其他瀏覽器正常。定位過程：其實開始拿到問題時是無從下手，不知所以然，根本就沒

h5開發解決華為自帶低版本瀏覽器相容的問題

先說明一下場景，要求做一個h5貸款的表單提交，既能在app內使用也app外面使用，app使用版本高，自然不用太多考慮相容性問題，flex佈局隨意發揮，但在app外面使用的場景就複雜得多，市面上的主流機型huawei、vivo、oppo、ios、微信相容各種瀏覽器，uc、qq等

vue解決ie與低版本瀏覽器es6相容問題

使用vue-cli搭建vue專案打包後在ie上開啟靜態資源出現空白，但是在chrome上一切正常，經檢測發現打包後的js存在相容問題，ie等低版本瀏覽器對es6存在不支援情況，解決方法如下： 1. 安裝babel-polyfill npm i babel-polyfill

平穩退化適應低版本瀏覽器

一、方法說明常用相容性解決方案是為寫Hack，通過*等標記出不同的瀏覽器，寫不同的樣式。然而本篇採取的是利用開源的JavaScript庫Modernizr（官網——https://modernizr.com/）編寫相應的javascript程式碼解決。首先利用Modernizr判斷瀏覽器是否支

js檢查ie低版本瀏覽器，並跳轉更新頁面

引言現在我們用的一些主流前端框架，如vue, angular， react等對低版本的ie瀏覽器支援不好，一般指的是ie9以下的。如果低版本ie瀏覽器，開啟我們的網站頁面時，我們希望給使用者溫馨的提示，去升級瀏覽器，而不是頁面混亂，各種報錯。怎

IE低版本瀏覽器相容CSS3的屬性的工具htc

前端開發工程師有一向我們必須要做的工作就是切圖製作頁面，最近有很多初級入門的同學發私信問我如何能夠讓低版本的IE瀏覽器相容CSS3的屬性，讓IE 6,7,8支援CSS3的部分屬性。今天要給

getElementsByClassName的低版本瀏覽器相容方法

getElementsByClassName函式實現獲取指定類名的子元素列表，語法如下： var elements = getElementsByClassName(element, names); 使用示例如下：如果html元素對應的DOM節點為exa

低版本瀏覽器（chrome小於40 firefox小於50 ie小於9）會提示升級資訊

相關推薦