兼容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=后面的""拼接时注意不能少
相关推荐
我在北京coding19 分钟前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机43 分钟前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人1 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景1 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾2 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉2 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。2 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel