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

阿新 • • 發佈：2019-02-18

引言

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

怎麼做

為了實現以上需求，我們分兩步來完成。
（1）用 js 檢查當前瀏覽器版本，如果是ie9以下，跳轉去更新頁面。
這段js一般放在，專案的首頁的head中。

/* 檢查ie瀏覽器版本 */
(function() {
  var o = navigator.userAgent.match(/MSIE (\d+)/);
  o = o && o[1 
];
  console.log('o', o);
  // ie9 以下 || o != null
  if (!!o && o < 9) {
    // 更新頁面
    var newUrl = location.protocol + '//' + location.host + '/views/static/ieupdate/index.html';
    location.href =  newUrl;
  }
})();

（2）更新頁面的實現
原始碼如下，其中四張瀏覽器圖示可以從線上demo中下載。

<html>
  <head>
    <title 
>請升級您的瀏覽器</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <!-- IE8/9及以後的版本用最新的引擎渲染網頁 -->
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <style>
      body{
        font-size: 13px;
        font-family: Georgia,Verdana,sans-serif 
;
        color: #333;
        padding:  0;
        margin: 0;
      }
      .wrap{
        min-width: 1024px;
        margin: 47px 20px;
        background-color: #fff4f4;
        border: solid 1px #777;
        box-shadow: 0 0 8px #888;
        position: relative;
      }
      .wrap .title{
        text-align: center;
        margin: 13px 25px;
        font-weight: bold;
        font-size: 19px;
      }
      .wrap .list{
        width: 100%;
        margin-bottom: 10px;
      }
      .wrap .list .item{
        text-align: center;
        padding: 10px;
        width: 25%;
      }
      .wrap .list .item:hover .link{
        border: dashed 1px rgb(170, 170, 170);
        padding-top: 109px;
        padding-bottom: 3px;
      }
      .wrap .list .item .link{
        padding-top: 110px;
        padding-bottom: 4px;
        background-position: center top;
        background-repeat: no-repeat;
        display: block;
        text-decoration: none;
      }
      .wrap .list .item .bf{
        background-image: url('ff.png');
      }
      .wrap .list .item .bo{
        background-image: url('op.png');
      }
      .wrap .list .item .bc{
        background-image: url('ch.png');
      }
      .wrap .list .item .bi{
        background-image: url('ie.png');
      }
      .wrap .list .item .link .name{
        color: #e25600;
        text-align: center;
        text-decoration: underline;
        font-size: 19px;
        font-family: 'Open Sans',sans-serif;
        font-weight: 300;
      }
      .wrap .list .item .link .vendor{
        font-size: 10px;
        color: #aaa;
        text-align: center;
        display: block;
        margin-top: 5px;
        text-decoration: none;
      }
      .wrap .tag {
        text-align: center;
        margin: 13px 25px;
        font-size: 19px;
        font-family: 'Open Sans',sans-serif;
        font-weight: 300;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <p class="title">您的瀏覽器需要更新,請下載一款免費而優秀的最新版瀏覽器。</p>
      <!-- 用table,為了相容 ie5 -->
      <table class="list">
        <tr>
          <td class="item">
              <a class="link bf" href="http://www.mozilla.com/firefox/" target="_blank">
                <span class="name">Firefox</span>
                <span class="vendor">Mozilla Foundation</span>
              </a>
          </td>
          <td class="item">
              <a class="link bo" href="http://www.opera.com/zh-cn" target="_blank">
                <span class="name">Opera</span>
                <span class="vendor">Opera Software</span>
              </a>
          </td>
          <td class="item">
              <a class="link bc" href="http://www.google.cn/chrome/browser/desktop/index.html" target="_blank">
                <span class="name">Chrome</span>
                <span class="vendor">Google</span>
              </a>
          </td>
          <td class="item">
              <a class="link bi" href="http://windows.microsoft.com/en-HK/internet-explorer/download-ie" target="_blank">
                <span class="name">Internet Explorer Edge</span>
                <span class="vendor">Microsoft</span>
              </a>
          </td>
        </tr>
      </table>
      <p class="tag">帶來更多安全、極速和樂趣。</p>
    </div>
  </body>
</html>

結束語

看起來很簡單，實際做了一遍，發現還是有一些需要注意的地方。如下：
1. 判斷ie瀏覽器版本，用的是正則 /MSIE (\d+)/, 但是ie10 以上是匹配不到的，所以要加入 !!o.
2. 瀏覽器更新頁面，要相容低版本ie瀏覽器，所以用table佈局，不要用較新的css，或者css3等。
3. 來測試你的ie瀏覽器吧：線上demo

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

引言

怎麼做

結束語

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

js獲取url 中的值，並跳轉相應頁面

js判斷手機網站,手機瀏覽器檢測,並跳轉到手機網站程式碼

spring security 採用資料庫配置檢測使用者登入，並跳轉不同頁面

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

整理IE低版本瀏覽器的bug

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

html5判斷瀏覽器來源並跳轉

掃描二維碼下載app，判斷是Android還是ios，並跳轉到不同的下載地址

判斷session失效，並跳轉到登入頁面

h5 網頁直接喚起淘寶app，並跳轉到對應商品頁面

android鎖屏狀態下，新訊息喚醒螢幕，並跳轉到指定頁面

自動識別PC端、移動端，並跳轉

django寫使用者登入判定並跳轉制定頁面

PC端判斷螢幕寬度到達手機寬度的時候，直接跳轉手機頁面

vue2自定義分頁元件，可設定每頁顯示數量，指定跳轉具體頁面

js實現"關閉視窗和瀏覽器事件並消除session會話，

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

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

JS 判斷Chrome核心的360瀏覽器，並禁用

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

引言

怎麼做

結束語

相關推薦