IE瀏覽器低版本判斷及升級提示

醉逍遙neo發表於2018-12-12
瀏覽器

需求：

由於公司專案對於ie瀏覽器只支援ie10及以上版本，為了更好的使用者體驗及人性化提示，想在程式碼裡判斷下ie瀏覽器低版本加個提示。

解決方案：

先貼程式碼：

<!--[if lte IE 9]>
  <script>
    alert("您正在使用的瀏覽器版本過低，為了您的最佳體驗，請先升級瀏覽器。");
    window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href);
  </script>
<![endif]-->
複製程式碼

將這段程式碼放在html檔案的head標籤內即可。

我公司這個專案是vue-cli構建的單頁面應用，所以就貼在了專案工程根目錄的index.html裡，非單頁面應用可以貼在登入頁裡。

例如我的index.html是這樣滴：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title></title>
    <!--[if lte IE 9]>
      <script>
        alert("您正在使用的瀏覽器版本過低，為了您的最佳體驗，請先升級瀏覽器。");
        window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href);
      </script>
    <![endif]-->
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

複製程式碼

擴充

以上是針對ie9及以下版本，

針對ie8及以下版本只需把9換成8即可，

針對ie10及以下版本使用：

  <script>
    /*@cc_on 
      alert("您正在使用的瀏覽器版本過低，為了您的最佳體驗，請先升級瀏覽器。");
      window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); 
    @*/
  </script>
複製程式碼

參考：support.dmeng.net/upgrade-you…

相關文章