![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端踩坑
sakoooo
这个作者很懒,什么都没留下…
展开
-
谷歌浏览器新开页面进程问题
场景:在A页面,点击按钮,新开窗口跳转到该项目的B页面,如果B页面的请求尚未结束,直接关闭B页面,此时A页面会卡死。原因: 谷歌浏览器在给新开窗口分配进程时,看是否同源,非同源页面会单独分配一个新进程,而同源页面只会分配一个相同的新进程。在上述场景中,A,B页面同源,所以谷歌浏览器只会分配一个进程,这就导致B页面在请求未结束时就关闭,A页面会卡死。谷歌浏览器新开页面进程问题...原创 2021-05-27 18:04:44 · 366 阅读 · 0 评论 -
请求http图片报错:net::ERR_SSL_PROTOCOL_ERROR
背景:Chrome浏览器下,https网站请求http图片失败报错:net::ERR_SSL_PROTOCOL_ERROR原因:Chrome 升级 80 对混合内容资源加载策略进行了改变,http请求http资源时会自动升级。解决方法:需要服务器端配置SSL协议证书。参考:混合内容 & https 升级攻略...原创 2021-02-28 20:19:18 · 4122 阅读 · 0 评论 -
【react】spa应用中获取上一页路径
场景: spa应用需要添加埋点,参数需要获取当前页面的上一页url。相关技术栈:react + react-router常规场景可以通过document.referrer拿到,但spa应用中切换路由document.referrer不会改变。查看了react-router和history的API,都没有提供监听路由变化的函数。因此采取的方案是,添加一个生命周期钩子,在location.pathname改变时,将旧的url保存在全局变量中。// util.jsexport const setR.原创 2020-11-23 16:33:07 · 4685 阅读 · 0 评论 -
img标签设置默认图片
场景: 当获取图片路径或读取不到图片时,显示一张默认图片代替默认当图片碎片。解决方法: 利用img标签的onerror事件。当logo不存在时,将触发 onerror事件,而 onerror 中又为该 img 指定了defaultIcon图片。也就是说图片images/logo.png存在则显示logo,不存在将显示defaultIcon。问题:如果defaultIcon 也不存在,则会...原创 2019-11-15 15:51:50 · 4600 阅读 · 0 评论 -
react项目引入本地iconfont图标
场景: ant design 的iconfont字体是调用的阿里的CDN地址,对于一些内网的应用,或者被屏蔽的站点,下载的字体或图标就不生效时,或需要使用本地的icon文件。解决方法: 下载图标库,本地引入。1.首先在iconfont上下载图标库到本地2.解压下载的压缩包,将js文件放在项目文件夹下3.引入(尽量使用import方式来引入url,避免相对路径由于打包造成路径丢失的...原创 2019-11-12 17:19:00 · 2440 阅读 · 0 评论 -
【数字边界】关于浏览器响应数据long型超长自动转换精度丢失的坑
场景: 后端传了一个long型的用户id,浏览器中返回数据由于超过最大长度自动转换精度丢失,导致无法获取到正确到用户id。postman中正常显示结果:控制台打印结果:原因: 由于JavaScript中Number类型的自身原因,并不能完全表示Long型的数字,在Long长度大于17位时会出现精度丢失的问题。解决方法: 让后端把id转成string型传过来参考博文:关于浏览器响应...原创 2019-11-07 14:55:16 · 1893 阅读 · 0 评论 -
【HTML中flex属性】设置flex属性时子元素宽度超出父元素
场景: 元素分为左右两块,左边元素定宽,右边元素自动充满屏幕。设置右边元素flex:1,当右边元素宽度超过父元素时,会造成右边宽度溢出。原样式:.left { width: 240px; } .right { flex: 1; }右边多设置一个width:0或overflow:hiddlen后样式正常。.left { width...原创 2019-09-29 10:41:21 · 11416 阅读 · 3 评论 -
【js判断文件类型】js上传文件前判断文件类型
场景:使用antd的Upload上传文件前判断文件类型,只允许上传指定类型文件由于要判断.amr类型的音频,一开始的写法: beforeUpload = file => { const isLt2M = file.size / 1024 / 1024 < 2; const isValid = file.type === "audio/amr"; ...原创 2019-09-18 16:46:56 · 1805 阅读 · 0 评论 -
【兼容性】PC端Safari浏览器overflow元素无法滑动问题
场景: 使用了antd的Table组件,发现在Safari浏览器下滑动条无法左右滑动。一开始上网查了一下,以为是iOS Safari浏览器上overflow: scroll元素无法滑动bug 同一个问题,原因大概是:父元素设定了overflow:auto或scroll,且子元素宽高不固定,导致Safari将父元素识别为单独的ScrollView,不触发内部滑动。(参考:https://blo...原创 2019-09-12 14:15:50 · 1618 阅读 · 0 评论 -
【react踩坑】设置div宽度自适应
场景: 使用antd组件tabs左右滑动时,有些边上的标签会只显示一半,影响页面效果。现在需要每页只显示5个tab标签,每个tab标签宽度自适应。实现思路: 监听包裹tabs的div组件的宽度变化,动态设置每个tabs的宽度为当前外部div宽度的1/5。方法一:const element = document.getElementsByClassName("ant-tabs-nav-scr...原创 2019-09-11 11:09:26 · 4445 阅读 · 0 评论 -
正则表达式匹配URL或者网址
https://blog.csdn.net/qq_38819293/article/details/81570751转载 2019-09-10 14:05:18 · 46 阅读 · 0 评论 -
【react踩坑】前端显示文件流图片
react前端处理文件流图片场景:后端传过来一个文件流图片,需要前端在页面展示。打印出来的ArrayBuffer对象:一开始借鉴了思否上看到的写法,先把获取的ArrayBuffer转成base-64 编码再显示(Uint8Array数组每一位转码后累加再用btoa函数转成base64编码),实现如下:function getBase64(img) { const base64Url...原创 2019-09-07 14:09:47 · 4672 阅读 · 0 评论