兼容IE8浏览器的8个实用知识点

需求背景：网站建设,页面功能需要兼容ie8浏览器,故在实际开发工作中,积累了如下几个兼容ie8浏览器的几个实用知识点.

1.IE8浏览器不支持JSON对象

js 复制代码

解决方案：**.html页面需要引入 json2.js文件，这个文件包含了JSON对象的兼容实现,可以使得我们的JSON数据能够在IE8中正常解析. 
参考链接：https://www.bootcdn.cn/ 在线js库

2.IE8浏览器不支持console对象

js 复制代码

解决方案：IE下构造空console对象
window.console = window.console || { log: $.noop, dir:$.noop, ... }
参考链接：http://www.cnblogs.com/xxcanghai/p/4569926.html

3.IE8不支持网站整体变成灰色

css 复制代码

html {
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(100%);
}

解决方案：

js 复制代码

解决方案：写独立的置灰的css、js文件,当主题是灰色时, 动态追加2文件到文档中. 
代码示例：// getTheme()==='1'时, 设置置灰相关css
function setGreyTheme() {
  // css
  var link = document.createElement("link");
  link.type = "text/css";
  link.rel = "stylesheet";
  link.href = './css/gray-theme.css?v=2';
  document.getElementsByTagName("head")[0].appendChild(link);
  // js
  var script = document.createElement("script");   //  <script src="./js/setGrayTheme.js"></script>
  script.src = './js/setGrayTheme.js?v=2';
  document.getElementsByTagName("body")[0].appendChild(script);
  // 标签栏logo  // <link rel="shortcut icon" href="./img/guohui.png" />
  var logoLink = document.createElement("link");
  logoLink.rel = "shortcut icon"
  logoLink.href = getStaticUrl() + 'guohui.png'
  document.getElementsByTagName("head")[0].appendChild(logoLink);
}

4.IE8需要F12开启调试框才能正确调用接口

js 复制代码

解决方案：请求接口前加上：jQuery.support.cors = true; // 很重要!!! ie8 加上这个才会调用接口

5.正式环境部署后,ie8浏览器请求的js、css文件还是之前的缓存问题

xml 复制代码

解决方案：引入js、css时给每个文件加上版本号
代码示例：<script src="./js/header.js?v=2"></script>

6.IE8异步请求接口有缓存问题

js 复制代码

解决方案1：每个请求后面拼接当前时间戳(当前使用方案)
代码示例:
$.ajax({
  url: postUrl + '/index/busSecurityIndex/queryFtpAddressList?_t=' + Date.parse(new Date()) / 1000,
})

解决方案2：全局中设置$.ajaxSetup({ cache: false })
if($.browser.msie && $.browser.version === '8.0'){
　　$.ajaxSetup({ cache: false });
}

7. IE8不兼容rgba()透明度

js 复制代码

css样式中透明度使用方式：background: rgba(0, 0, 0, .5);
解决方案：filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);   --->#99代表透明度0.6        #7f代表透明度0.5

透明度与IE下filter值转换：
0.1-> 19    0.2->33  0.3->4c  0.4->66  0.5->7f  0.6->99  0.7->b2  0.8->c8  0.9->e5  
参考链接：https://blog.csdn.net/weixin_45733780/article/details/109048410

8.IE8不支持模板字符串写法

ini 复制代码

解决方案：将模板字符串改为字符串拼接 
例：var imgNode = `<img src="${Imgurl}${arr[i]}" />`
改：var imgNode = "<img src=" + '"' + Imgurl + arr[i] + '"' + "/>";
注意：src=后面的""拼接时注意不能少

兼容IE8浏览器的8个实用知识点

1.IE8浏览器不支持JSON对象

2.IE8浏览器不支持console对象

3.IE8不支持 网站整体变成灰色

4.IE8需要F12开启调试框才能正确调用接口

5.正式环境部署后,ie8浏览器 请求的js、css文件还是之前的缓存问题

6.IE8异步请求接口有缓存问题

7. IE8不兼容rgba()透明度

8.IE8不支持模板字符串写法

3.IE8不支持网站整体变成灰色

5.正式环境部署后,ie8浏览器请求的js、css文件还是之前的缓存问题