JavaScript 判断浏览器是否是IE


Posted in Javascript onFebruary 19, 2021

作为一个前端,避免不了会遇见IE的坑,其他浏览器都好好的,测到IE就完蛋,各种不支持,服气了

有些属性和方法是所有版本IE都不支持,而有些则是部分支持,在项目中能够,主要分界岭为IE8,我相信目前大部分在维护和开发的项目,都是支持到IE8及已上版本即可,那么这篇文章,粗浅的总结一下,如何判断浏览器是IE及版本是8.0

首先,有些属性和方法是所有版本IE都不支持,那么只需要判断是否是IE即可

以下三种是我在项目中,用到的方法,如有新的方法,会更新,若大家有其他更好的方法,还望不吝赐教~~

  • document.all
  • window.ActiveXObject
  • window.navigator.msSaveOrOpenBlob
//选一种即可
function isIE(){
 // 据说火狐以后会加入document.all这个方法,所以建议使用另外二种方法
 if (document.all) return true; 
 
 if (!!window.ActiveXObject || "ActiveXObject" in window) return true; 
 
 if (window.navigator && window.navigator.msSaveOrOpenBlob) return true; 
}

判断浏览器是IE8及以下版本

我在上文中也提到,大部分在维护和开发的项目,都是支持到IE8及已上版本即可

navigator.userAgent

JavaScript 判断浏览器是否是IE

function isIE8(){
 var DEFAULT_VERSION = 8.0; 
 var ua = navigator.userAgent.toLowerCase(); 
 var isIE = ua.indexOf("msie")>-1; 
 var safariVersion; 
 if(isIE){ 
  safariVersion = ua.match(/msie ([\d.]+)/)[1]; 
 } 
 if(safariVersion <= DEFAULT_VERSION ){ 
  return true 
 };
}

如有特殊要求,需要兼容更低版本,那么:

var isIE = !!window.ActiveXObject; 

var isIE6 = isIE && !window.XMLHttpRequest; 

var isIE8 = isIE && !!document.documentMode; 

var isIE7 = isIE && !isIE6 && !isIE8;

IE8及以下不支持的CSS属性

  • 阴影 box-shadow
  • 渐变 linear-gradient
  • 提示符 placeholder
  • 透明度 rgba
  • 边框 border-image
  • 圆角 border-radius
  • 旋转相关 transform

IE不支持的方法

在线浏览PDF文件,因为IE并没有内置的pdf阅读器,因此只能下载查看

  • 后端返回文件流时:window.navigator.msSaveOrOpenBlob(blob);具体可以参考另两篇博文,
  • JavaScript处理后端返回PDF文件流,在线预览下载PDF文件
  • Vue.js +pdf.js 处理响应pdf文件流数据,前端转图片预览不可下载

不支持<a>标签的download属性,因此可以用新建iframe,并设置其src属性

if (isIE()){
	$("a").bind('click',function(){
		var elemIF = document.createElement("iframe"); 
		elemIF.src = FilePath;
		elemIF.style.display = "none"; 
		document.body.appendChild(elemIF);
	});
} else {
	$("a").attr("href",FilePath).attr("download",FileName);
}

以上就是JavaScript 判断浏览器是否是IE的详细内容,更多关于JavaScript 判断浏览器的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
原生JavaScript实现进度条
Feb 19 #Javascript
原生JavaScript实现换肤
Feb 19 #Javascript
基于vue的video播放器的实现示例
Feb 19 #Vue.js
JavaScript Dom实现轮播图原理和实例
Feb 19 #Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 #Javascript
react项目从新建到部署的实现示例
Feb 19 #Javascript
原生JavaScript实现幻灯片效果
Feb 19 #Javascript
You might like
php返回json数据函数实例
2014/10/09 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
JS编程小常识很有用
2012/11/26 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
python编程嵌套函数实例代码
2018/02/11 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
Django之模型层多表操作的实现
2019/01/08 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
Python常用数据分析模块原理解析
2020/07/20 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
岗位职责定义及内容
2013/11/08 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA