兼容低版本IE瀏覽器的一些心得體會（持續更新-2020.08.31）

前言：

近期工作中，突然被要求改別人的代碼，其中有一項就是兼容IE低版本瀏覽器，所以優雅降級吧。

我相信兼容低版本IE是許多前端開發的噩夢，尤其是改別人寫的代碼，更是痛不欲生。

本文將介紹一些本人兼容時的一些心得體會，以及踩到的一些坑。

匯總：

1.IE瀏覽器不兼容webp格式：

項目中有些圖片是用webp格式存儲的，IE瀏覽器完全不兼容。

我們要用各種圖像處理軟件改成jpg或者png格式的。

2.IE瀏覽器對Flex不友好：

如下圖，IE10以下版本對flex不兼容。因項目中大量用了flex布局，導致一切換到IE9，界面布局立馬亂套。

 

 

 我是利用html的hack，引入了一個新的css文件，挨個給float吧。（注意清除浮動操作，別讓特定的元素丟失高度）

 <!--[if lte IE 11]>
     <link rel="stylesheet" href="{$WEB_URL}/Public/common/css/ie/ieUtil.css">
 <![endif]-->

3.IE9及以下對swiper插件兼容性問題：

在項目中，輪播圖的板塊還是比較多的，IE9以下，需要將swiper插件降級到2.x及以下。

所以代碼就有了這樣的塊：

<!--[if !IE 9]><!-->
      <link rel="stylesheet" href="{$WEB_URL}/Public/common/static/swiper/css/swiper.min.css">
    <script src="{$WEB_URL}/Public/common/static/swiper/js/swiper.min.js"></script>
    <!--<![endif]-->

    <!--[if IE 9]>
        <link rel="{$WEB_URL}/Public/common/static/swiper/css/idangerous.swiper2.7.6.css">
        <script src="{$WEB_URL}/Public/common/static/swiper/js/idangerous.swiper2.7.6.js"></script>   
    <![endif]-->

說明：swiper.min.css/js，是高版本swiper；而idanger.swiper2.7.6.css/js，是swiper2的文件。

注意：這並沒有寫錯，雖然不是標准的hack格式，但只有這么寫才能不讓內部的代碼被瀏覽器放到頁面上。

js中需要初始化輪播圖並配置，這里放一段IE版本適配的代碼：

if((/msie [6|7|8|9]/i.test(navigator.userAgent))){  //如果是IE6、7、8、9則執行下邊的
    var liveSwiper = new Swiper('.section_center .swiper-container', {
        loop: true, //設置為true，則開啟loop（環路）模式，默認為false
        speed: 3000, //滑動速度
        autoplay: 3000, //自動切換的時間間隔（單位ms），不設定該參數slide不會自動切換。
        autoplayDisableOnInteraction: false, //用戶操作swiper之后，是否禁止autoplay，默認為true：停止。
        watchActiveIndex:true,
        pagination : '.swiper-pagination',
        paginationClickable :true,
        onSlideChangeEnd: function(){
          var text = $(".section_center .swiper-slide").eq(this.liveSwiper.activeIndex).children().eq(0).children().eq(1).html();
          $(".bannertitle").text(text);
          
        },
    })
}else{
    var liveSwiper = new Swiper('.section_center .swiper-container', {
      slidesPerView: 1,
      spaceBetween: 10,
      loop: true,
      autoplay: true,//可選選項，自動滑動
      pagination: '.swiper-pagination',
      paginationClickable: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.section_center .swiper-button-next',
        prevEl: '.section_center .swiper-button-prev',
      },
      on: {
        slideChangeTransitionEnd: function(){
          var text = $(".section_center .swiper-slide").eq(this.realIndex + 1).find("p").text();
          $(".bannertitle").text(text);
        },
      },
    })
}

版本不同，在寫法上也有一定的區別，具體可以參照2.x官網 https://2.swiper.com.cn/。

4.IE9以下不要用ES6了：

隨着ECMAScript標准的升級，各種語法糖深得我們喜愛，但如果要兼容低版本，就別用了吧。

切換到IE9以下，控制台中就各種報錯，像let，const、模板字符串這些屬於ES6范疇的，都改成ES5標准的吧。

5.IE9及以下不支持placeholder屬性：

在項目中，當然有與用戶交互的模塊，所以輸入框是一定有的。

但IE9及以下不兼容input標簽的placeholder屬性，這樣沒有提示消息，用戶體驗很差。

 

 

我這里是用一個div套在input外邊，去監聽input中的內容，邏輯如下：（雖然不靈活，但能夠比較容易想象）

 

 

6.IE8及以下不兼容 JQuery 2.x 版本：

在IE8以下，對JQuery就不兼容了，這時我們要降級到1.x。上代碼：

 <!--[if !IE 8]><!-->
    <script type="text/javascript" src="{$WEB_URL}/Public/pdsWeb/static/jquery.min.js"></script>
    <script src="{$WEB_URL}/Public/pdsWeb/static//swiper/js/swiper.min.js"></script>
<!--<![endif]-->
<!--[if  IE 8]>
    <script type="text/javascript" src="{$WEB_URL}/Public/pdsWeb/static/jquery-1.9.min.js"></script>
    <script src="{$WEB_URL}/Public/pdsWeb/static//swiper/js/idangerous.swiper.min.js"></script>
<![endif]-->

7.IE8及以下不兼容CSS3:

CSS3是前端人的魂啊，沒CSS3了，頁面的視覺效果就會大打折扣。

像常用的border-radius圓角，就得強行變成方角了。

如果強行要圓角，也不是不行，有插件引插件，不行了一個像素一個像素畫div也是個辦法。（辦法總比問題多）

最難受的是CSS3中的選擇器都用不了了，也只能用傳統選擇器了。

8.對於IE7及以下版本的兼容：

這里就太坑了，感覺一下回到了解放前。

只是說這里可以使用css hack進行特定的屬性兼容。

 

============================================== 分割線 ==================================================

（2020.8.31更新）

9.IE9及以下拒絕post方法訪問ajax請求的數據：

網上查了各種資料，這種問題還是很具有代表性的。

這里我用express寫了一個本地服務，代碼如下：

const express = require("express");
const app = express();
const url = require("url");

app.use('*', (req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Credential', 'true');
    res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
    next();
});

app.post('/test', (req, res) => {
    console.log("success00000000000")
    res.end('yes')
});


app.listen(8082, () => {
    console.log("8082啟動中...");
});

邏輯很簡單，訪問http://127.0.0.1:8082/test。如果成功，控制台打印“success00000000000”，並返回“yes”。

用JQuery的ajax去訪問，代碼如下：

$.ajax({
        url: "http://127.0.0.1:8082/test",
        type: "post",
        dataType: JSON,
        data: {
            'jimmy': "0110"
        },
        success: function(res) {
            console.log(res)
        },
        error: function(err) {
            console.log(err)
        }
    })

在IE10中都好着，結果都是成功的。

但一切換到IE9中，立刻進入error，打印信息如圖：

 

 

原因：因為JQuery對低版本IE需要手動支持跨域，ajax前加一句代碼：

jQuery.support.cors = true;

再訪問一下，就成功了：

可是，在線上服務器環境中，會出現拒絕訪問的提示。我暫時只有手動解決方案，ajax參數中加

crossDomain:true也試過，script標簽引入jquery.xdomainrequest.min.js也試過，但嘗試多次，沒有效果。

通過查詢其拒絕訪問原理，只好手動去啟用瀏覽器“通過域訪問數據源”，步驟如下：

 

雖然比較麻煩，但親測有效。（不可能讓所有用戶都這么設置）目前還在嘗試使用各種方法去使瀏覽器放行......

============================================== 分割線 ==================================================

持續更新中......

 

 

　　.