重构之处理IE浏览器兼容问题
目录
情景 1 :判断是否为 IE 浏览器
情景 2 :" TypeError : 对象不支持 “ includes ” 属性或方法 "
情景 3 :报错 SCRIPT5022 : SecurityError sockjs.js (1683,3)
情景 4 :get 自动请求来自缓存的问题
情景 5 :tr、td 标签不兼容 HTML contenteditable 属性
情景 6 :IE 浏览器不兼容之 css 篇
情景 7 :在 IE 上如何查看浏览器缓存 ?
情景 1 :判断是否为 IE 浏览器
问题描述:谷歌浏览器 使用 v-model 绑定控制 input 框高的值能够实时反应并生效 ,
而到了 IE 浏览器上就没有同步的效果了 ,其中一边改了 ,另一边的话只有点击了输入框使其聚焦后才会发生改动后的改变效果 , 所以就打算通过判定一下是否为 IE 浏览器后并通过代码控制使其进行自动聚焦,也可达到类似的效果,下面则就是如何判断浏览器的知识点:
知识点 :
navigator.userAgent.indexOf 来 判断 浏览器 类型
$(document).ready(function(){var ua = navigator.userAgent;if(ua.indexOf("Android")>0 || ua.indexOf("iPhone")>0 || ua.indexOf("iPad")>0) { //移动端location.href="${ctx}/live/wap";} else { // pc端location.href="${ctx}/live/index";} });
<script language="JavaScript">function getOs() {var OsObject = "";if (navigator.userAgent.indexOf("MSIE") > 0) {return "MSIE";}if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {return "Firefox";}if (isSafari = navigator.userAgent.indexOf("Safari") > 0) {return "Safari";}if (isCamino = navigator.userAgent.indexOf("Camino") > 0) {return "Camino";}if (isMozilla = navigator.userAgent.indexOf("Gecko/") > 0) {return "Gecko";}}alert("您的浏览器类型为:" + getOs()); </script>if (window.XMLHttpRequest) { // Mozilla, Safari, ...http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IEhttp_request = new ActiveXObject("Microsoft.XMLHTTP"); }
前端 浏览器 navigator.userAgent 操作
var userAgent = navigator.userAgent; // 取得浏览器的 userAgent 字符串 console.log(userAgent)
/* 是否是火狐 ,火狐内核 Gecko */ var isFirefox = navigator.userAgent.indexOf('Firefox') > -1 console.log('火狐' + isFirefox) // 返回 true 则是 ,false 则不是 /* 是否是 WebKit 内核 */ var isWebKit = navigator.userAgent.indexOf('WebKit') > -1 console.log('谷歌内核' + isWebKit) // 返回 true 则是,false 则不是 /* 是否是 谷歌 */ var isChrome = navigator.userAgent.indexOf('Chrome') > -1 console.log('谷歌' + isChrome) // 返回 true 则是 ,false 则不是 /* 是否是 opera , opera 内核 Presto */ var isOpera = navigator.userAgent.indexOf('Opera') > -1 console.log('Opera' + isOpera) // 返回 true 则是 ,false 则不是 /* 是否是 IE 内核 */ var isTrident = navigator.userAgent.indexOf('Trident') > -1 console.log('IE内核' + isTrident) // 返回 true 则是 ,false 则不是 /* 判断是否 IE 浏览器 */ var isIE = navigator.userAgent.indexOf("compatible") > -1 && navigator.userAgent.indexOf("MSIE") > -1 && !isOpera console.log('IE ' + isIE)// 因为 IE10 - IE11 的版本问题,不再支持 document.all 判断,所以 IE 判断函数要重新写 var isIeL = !!window.ActiveXObject || "ActiveXObject" in window console.log('IELLQ ' + isIeL) // 判断是否IE浏览器 /* 判断是否 IE9 ; 如果是其他 IE 版本,则 MSIE 7.0 MSIE 8.0 */ var isIE9 = navigator.userAgent.indexOf("MSIE 9.0") > 0 console.log('IE999' + isIE9)// 判断是否为移动端 var browser = {versions: function () {var u = navigator.userAgent;return {trident: u.indexOf('Trident') > -1, // IE 内核presto: u.indexOf('Presto') > -1, // opera 内核webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核gecko: u.indexOf('Firefox') > -1, // 火狐内核 Geckomobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为 移动终端ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // iosandroid: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, // androidiPhone: u.indexOf('iPhone') > -1, // iPhoneiPad: u.indexOf('iPad') > -1, // iPadwebApp: u.indexOf('Safari') > -1 // Safari};}() } var isPhone = browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad console.log("是否为移动端" + isPhone)// JS 判断浏览器是否是 IE9 以下,处理可能遇到的兼容性问题 if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE", "")) < 9) {console.log("您的浏览器版本过低, 请使用 IE9 及以上版本"); }
项目内所用 :
src / utils / tools.js
/*** 判断是否为 IE 浏览器*/ const isIE = function () {if (window.ActiveXObject || "ActiveXObject" in window) {return true;} else {return false;} };export { isIE };
组件内使用 :
<template><div><el-input ref="addressInput" v-model="address" :readonly="true"></el-input><el-buttonclass="copy-ad"type="primary"size="medium"@click="copyAddress(address)">复制链接</el-button></div> </template><script> import { isIE } from "../../../utils/tools"; export default {methods: {data() {return {address: "https://www.baidu.com",};},copyAddress(url) {// 拷贝地址this.$refs.addressInput.select(); // 输入框内容选中效果if (isIE()) {this.$message.success("复制成功");} else {this.$copyText(url).then((res) => {this.$message.success("复制成功");}).catch((err) => {this.$message.error("该浏览器不支持自动复制, 请手动复制");});}},}, }; </script>
<template><div>文本框高 :<el-inputv-model="data.answerInputRow":maxlength="2":disabled="data.quInputType !== '1'"placeholder="3 / 行"@input="rowNumInput($event, data.answerInputRow, data)"></el-input></div> </template><script> import digitalInput from "../../../utils/digitalInput"; import { isIE } from "../../../utils/tools";export default {rowNumInput(event, modelValue, data) {// 限制用户输入非数字内容(文本框高)data.answerInputRow = digitalInput(event, modelValue);// IE 浏览器使其自动聚焦if (isIE()) {this.$nextTick(() => {document.getElementById("ieFocus").focus();});}}, }; </script>
情景 2 :" TypeError : 对象不支持 “ includes ” 属性或方法 "
问题描述:我在利用 Vue 脚手架 vue-cli4 进行开发时,用了 ElementUI 这个组件库里的 InfiniteScroll 无限滚动 组件 ,但是我运行项目在谷歌里跑的好好的,用 IE 浏览器再打开编译好的页面时,就遇到了兼容性问题:组件功能实现不了 ,控制台报错为:
[ Vue warn ] : Error in directive infinite-scroll inserted hook :
" TypeError : 对象不支持 “ includes ” 属性或方法 " found in --->
而且最神奇的是我的项目中压根就还没有用到 includes 这个方法呀 ,
我在全局搜索 includes 也都没有找到 , 然后去对应的文件( HomePage.vue 文件,index.vue 文件,App.vue 文件 里进行局部搜索 includes 也都没有找到 includes )
这报错好神奇啊 , 压根就没有还能报错 ( 可能是Element UI 组件库的底层用到了吧 )
后来百度查找 ,通过下面这个方法安转一个插件后解决:
第一步、安装 babel-polyfill 插件1.在项目中安装 babel-polyfill , $ npm install --save babel-polyfill
2.在 index.html 里面加上:<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title>Document</title> </head><body><div id="app"></div> </body></html>
3.在 main.js 里面引入 import 'babel-polyfill'
4. webpack.base.conf.js 下修改配置项: ( 老版本配置了 ,可忽略此步骤 )
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: ["babel-polyfill", "./src/main.js"]
}.....}
【 这一步我没有配置 , 可能是因为我在 vue.config.js 内配置过了 , 反正当初也是拿的别的项目模板复制粘贴上去的 , 最后再运行 IE ,确实不再报错了 , 好神奇 】
5.重新运行程序 重新运行程序 重新运行程序 重要的事情说三遍,一定要重新运行然后用 IE 浏览器访问程序,显示正常。
情景 3 :报错 SCRIPT5022 : SecurityError sockjs.js (1683,3)
问题描述:Vue IE 报错 SCRIPT5022 : SecurityError sockjs.js (1683,3)
1、找到 / node_modules / sockjs-client / dist / sockjs.js
2、找到代码的 1605 行
3、保存后 刷新
情景 4 :get 自动请求来自缓存的问题
src / utils / request.js 内的请求拦截器内
// request 请求拦截器 axios.interceptors.request.use((config) => {// 从 session 中拿到 userId, 如果不存在, 说明没有登录, 就去登录页let userToken = window.sessionStorage.getItem('userId')if (userToken && userToken != null && userToken != 'null') {config.headers['userId'] = userTokenconfig.headers['If-Modified-Since'] = '0'config.headers['Cache-Control'] = 'no-cache' // 清除 IE 接口缓存问题} else {window.sessionStorage.clear() // 删除登录的所有状态if (process.env.NODE_ENV === 'development') {window.location.href = `${process.env.VUE_APP_BASE_API}/login`} else {window.location.href = `${process.env.VUE_APP_BASE_API}/login`}}config.headers["Content-Type"] = "application/json";console.log(config, "config");// config.timeout = 10000return config;},(error) => {// 请求失败拦截console.log("request-error:" + error); // for debugreturn Promise.error(error);} );
IE 浏览器的缓存问题非常的严重,网上也没有一篇完整的解决思路和文档,特此写下解决方法,供自己以后查看。。。
问题描述:IE 浏览器 get 会自动请求来自缓存的问题
项目在 IE 浏览器内的 get 请求 会在 “ 已接收 ” 下提示显示 ( 来自缓存 ),
并且右边的 标头 下的 请求标头 内容看着很明显不对劲
正文 里的 响应正文 内容也不对
所以最后讨论推导得出的就是因为 get 请求在 IE 里面走了 缓存
解决方案 : (简单)就直接在 get 请求里多携带一个 时间戳 参数就 OK 啦
new Date().getTime()
通过以上两种方法中的任意一种,都可以解决 IE 浏览器中因为缓存问题,
而导致 bootstrap-table 插件中网页的数据与数据库数据不一致的问题;
解决 IE 浏览器 axios 发起 get 请求自动请求来自缓存的问题
情景 5 :tr、td 标签不兼容 HTML contenteditable 属性
知识点 : HTML contenteditable 属性
HTML contenteditable 属性 | 菜鸟教程
情景 6 :IE 浏览器不兼容之 css 篇
1、display : flex ;
(1) align-items: center; // IE 不生效
解决方案 :使用 padding 的上下边距来实现一个上下居中假效果
padding : 15px 32px;
(2)
2、url 路径
// IE 不兼容此写法 .radio {content: url('~@/assets/image/radio.png') }
3、不支持简写形式
(1) border: 1px solid gray; // IE 不生效
解决方案 :拆分开来写
border-width: 1px; // 边框宽度 border-style: solid; // 边框样式 border-color: #ccc; // 边框颜色
4、color 颜色值
color: #cccc; // IE 不生效
解决方案 :
设置为 color: #ccc; 或者 color: #cccccc;
5、
情景 7 :在 IE 上如何查看浏览器缓存 ?
以前一直用 chrome 谷歌浏览器 , 查看缓存很方便 ,
开发工具 F12 后点击 Application -> Storage -> local Storage 即可查看 。
现在要用 IE 查看 , IE 没有像 Chrome 一样直接列出 ,
可以在 IE 浏览器的 控制台 输入 localStorage 或者 sessionStorage
IE 查看 ,localStorage 作为 全局对象 ,只需要在控制台中输入 localStorage 即可查看。
- 如果 IE 想清除 ,输入 localStorage.clear() 回车即可 。
情景 8 :
重构之处理IE浏览器兼容问题相关推荐
- WEB浏览器兼容(转)
这是我总结多年的一个小文档,最近看见有人咨询浏览器兼容的问题,就贡献出来. 并不一定全,有的也可能不准确,比如新出的IE8.Chrome等都没有太多涉及,虽然最近做的一些项目也兼容了IE8.Chrom ...
- css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局 语音 编辑 锁定 讨论 上传视频 上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
- html5新特性 移除哪些,html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?...
(1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...
- 兼容浏览器_你知道什么是跨浏览器兼容吗?
文章来自:卓码软件测评 在过去的二十年里,互联网得到了巨大的发展.1998年只有大约240万个网站,而现在已经有大约18亿个了,这正好是74900%的增长.不仅如此,互联网用户的数量也从1998年的1 ...
- 常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们 ...
- inline-block各浏览器兼容以及水平间隙问题解决方案
inline-block各浏览器兼容以及水平间隙问题解决方案 参考文章: (1)inline-block各浏览器兼容以及水平间隙问题解决方案 (2)https://www.cnblogs.com/sh ...
- 解决360浏览器兼容模式的页面显示问题
解决360浏览器兼容模式的页面显示问题 参考文章: (1)解决360浏览器兼容模式的页面显示问题 (2)https://www.cnblogs.com/njy888888/p/7827200.html ...
- JS中常遇到的浏览器兼容问题和解决方法
JS中常遇到的浏览器兼容问题和解决方法 参考文章: (1)JS中常遇到的浏览器兼容问题和解决方法 (2)https://www.cnblogs.com/wws-bk/p/9770834.html 备忘 ...
- 关于浏览器兼容问题的解决办法,全部都在这里了
关于浏览器兼容问题的解决办法,全部都在这里了 参考文章: (1)关于浏览器兼容问题的解决办法,全部都在这里了 (2)https://www.cnblogs.com/myprogramer/p/6624 ...
最新文章
- 不要网上乱拷贝代码了!一段网上找的代码突然炸了!
- 电子商务网站比较常用的缓存策略架构
- 【转】ubuntu,你改变了我的人生
- how does SAP CRM partner function work - how is account change working
- SAP APF modeler过滤器的设计原理
- 复习Linux基础操作---权限操作
- 乔新亮:以赢为终,三个月打造一支硬核IT团队
- Gateway与后端系统连接详细配置
- 机房重构(4)——触发器的使用
- Android N-ify使用教程,Xposed新模块 无需升级也能使用Android N新功能
- 计算机电容与晶体管等硬件的作用,太实用了|开关电源中各元器件的命名与用途!-EDA365电子论坛通信数码-人工智能-计算机-半导体-手机家电消费电子硬件门户网站...
- 视频直播连麦技术详解
- python正则表达式提取文本中的电话号码和邮箱
- Dataset之GermanCreditData:GermanCreditData数据集的简介、下载、使用方法之详细攻略
- No appenders could be found for logger
- 使用python在pycharm中制作二维码
- ❤唯美满天星❤ html+css+js炫酷3D相册(含音乐/可自定义文字)程序员表白必备
- MATLAB中能实现信号DTF,matlab实现傅里叶变换
- 小学生打扫计算机教室的简报,简报:我校开展“清扫校园”卫生大扫除活动
- switch case之合并case
热门文章
- AutoCAD 2021绿色中文精简版
- 上传微信小程序项目到Github
- Vue速成day01
- 教室计算机英语怎么读,教室英文怎么读?
- 计算机运行很卡很慢,PS打开很卡怎么办?电脑太老PS运行慢如何优化?
- 电脑不兼容linux,解决方法:Linux存在图形卡不兼容问题
- 机器人鸣人是哪一集_火影忍者596集剧情介绍番外篇九尾抢夺指令_鸣人VS机器人版鸣人...
- MINE:Mutual Information Neural Estimation
- Unity URP贴花系统的简单使用
- 等保2.0.第十一章.等保2.0实战(上)