![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端兼容问题合集
时光机上敲代码
喜欢敲键盘的程序猿
展开
-
uniapp vue 中 echarts 修改tooltip 添加html便签没被解析
开发环境:uniapp ;vue ; echarts5.0背景:在使用uniapp开发echarts折线图的时候,重写tooltip时候,点击折线图的小弹窗,没有解析html标签。原因:echarts中的js和uniapp自带的wx对象js冲突了,可以把wx对象重置未空就行。解决办法:在main.js 添加 window.wx = {},重置对象...原创 2022-02-18 16:48:11 · 1072 阅读 · 2 评论 -
完美解决:antd-vue Chrome禁用账号密码自动填充
背景:在系统登录页中,点击chrome中的默认保存会自动填充账号密码,现在想把这个默认功能去掉。。。网上看到了:都是用autocomplete="off" autocomplete="new-password"就能使用了,我就高兴的copy,见鬼的是大家都说能用,只有我不行。。。,注意了下,文章的日期,大多是几年前的。。一个大胆的想法产生了,就是高版本浏览器无法支持autocomplete,一番查看果然有人是这么回答的,解决方式:先让input 为readonly,得到焦点时候再把re...原创 2022-01-25 11:18:20 · 5294 阅读 · 10 评论 -
vue npm安装报错 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
背景:今天看到同事电脑突然爆FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory ,同样的代码,我确没有问题,调查了下是他的node 内存不足,nodejs内存溢出,解决方式:在命令行输入下面代码;npm install -g increase-memory-limitincrease-memory-limit...原创 2021-11-26 18:25:04 · 904 阅读 · 0 评论 -
vue 使用scss报错 this.getOptions is not a function
背景:npm 安装sass发现报错了大概通过npm安装sassnpm install node-sassnpm intall sass-loader上述命令安装的是最新版的,出现错误的原因就是安装最新版的导致getOptions()不兼容,解决方案就是卸载sass-loader node-sass,安装低版本,命令如下npm uninstall sass-loader //卸载npm install sass-loader@8.0.0 //安装8.0npm uninst...原创 2021-11-02 20:34:29 · 983 阅读 · 2 评论 -
Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘
背景:在一个旧项目中,发现重新npm install 的时候,报了Cannot assign to read only property 'exports' of object '#<Object>',而本地运行的时候没问题,发布服务器的时候,发现问题,报了Cannot assign to read only property 'exports' of object '#<Object>'。出现bug的原因是:第一种是:webpack不能混合使用import 和modul..原创 2021-11-01 15:39:04 · 3791 阅读 · 1 评论 -
andriod移动端文字不上下居中-完美解决
背景:在andriod移动端页面中,发现文字不管用flex布局,还是设置line-hight文字都无法上下居中,都会偏上一点,在pc和ios页面中又没问题,让我差点怀疑人生,这么简单的居中都搞不定了?调查:这是andriod的一个bug,字体小于12px,或者使用rem等会出现这种情况(网友提供的资料待验证)解决办法:1.把字体放大2.再用scale缩小,缩小后原来的位置莫名被保留了,导致间隙大,这时候再用位移调整下,如下代码: font-siz...原创 2021-09-29 20:11:51 · 1054 阅读 · 0 评论 -
layui iframe 中 alert无法弹出
环境:layui 框架;chrome92版本场景:开发的web页面中,添加alert(),正常打开,把该页面,用iframe内嵌到其他页面无法弹出alert(),而部分电脑吃肉OEM确可以弹出alert,可以正常使用问题原因:最后发现是chrome新版本中,把iframe中不同源页面的alert给禁用了。解决办法:把alert替换成layui的弹窗来替代就行(没有使用layui,手写个弹窗,和用第三方的弹窗都行)...原创 2021-07-29 10:36:30 · 804 阅读 · 0 评论 -
前端防抖js代码
场景:在input中高频的输入文字,监听输入框的变化,去调用接口,会高频的请求接口,导致浪费流量,引发卡顿。比如未优化的代码场景:<form action="" class="example-form"> <div> <label for="name">名称</label> <input type="text" name="name" id=原创 2021-06-18 15:08:13 · 201 阅读 · 0 评论 -
完美解决:Property ‘XXX‘ does not exist on type ‘Window‘
发生情景:在app中的h5,app注入了全局的window对象和webview里面的页面交互,打包的时候报了错误。解决方式:方法一:(window as any).xxx方法二:declare global { interface Window { xxx: any; }}window.xxx= window.xxx|| {};方法三:interface MyWindow extends Window { xxx(): void;} decl原创 2021-04-20 20:00:39 · 12420 阅读 · 0 评论 -
接口中参数id值,每次返回的都不一样
今天开发中碰到怪异的现象:有个值接口调用后,id每次都不一样。原因:查看原因是因为,这个id值是数字,当数字太长后精度会缺失。(后端java代码中就已经精度缺失,所以输出时就每次都不一样)解决方式:只要后端输出的字段int改成string就行...原创 2021-04-20 09:45:35 · 1016 阅读 · 0 评论 -
SourceMap 浏览器控制台报错:DevTools failed to load SourceMap:Could not load content for ...
什么是SourceMap:SourceMap就是如何把压缩后的js代码映射成格式化代码的方法。当客户端浏览器Chrome在收到这个压缩后的js文件后,它会自动的去寻找服务器上相关的sourcemap文件并把压缩的js代码转换成格式规范的js代码----------------------------------------------------------------------------------------SourceMap报错原因:压缩过程中可能会破坏掉js文件中的部分代码导致调原创 2021-04-01 17:00:00 · 5838 阅读 · 0 评论 -
import 动态路由引入路径报错 Error:Can‘t find mudules
原因:因为import 在webpack4中动态路由中不能包含变量出错写法:export const loadView = (view) => { // 路由懒加载 //return (resolve) => require([`@/views/${view}`],resolve) return () => import(`@/views/${view}`)}正确写法:export const loadView = (view) => { // 路原创 2021-03-31 10:47:14 · 1729 阅读 · 0 评论 -
js常见计算精度问题集合并且综合解决
1.js加法bug问题:0.1+0.2不等于0.3引发原因:在二进制的世界里面,有的数字在二进制里面是无限循环的,js数字二进制的有限的位数,在某个时候就会出现计算错误解决办法:parseFloat((0.1+0.2).toFixed(10))————————————————————————————————2.js parseFloat保留小数,没有四舍五入问题:0.435.toFixed(2),理想状态是等于0.44,实际等于0.43引发原因:有的数字在二进制里面是无限循环原创 2021-01-31 11:01:31 · 867 阅读 · 1 评论 -
ios端 newDate 在手机显示NAN
问题描述:ios端 newDate(2021-03-1610:54:36)在手机显示NAN,这是个ios兼容性问题,在web中是正常显示解决方法:用正则把 '-' 换成 '/' ,让时间格式变成以下格式new Date("2021/03/16 10:54:36").getTime()正确写法:var date = '2021/03/16 10:54:36'.replace(/-/g,"/");console.log(new Date(date).getTime())...原创 2021-01-29 15:30:23 · 161 阅读 · 0 评论 -
h5移动端IOS系统需要点击两下才能触发点击事件
解释:这是ios移动端常见的兼容性问题解决方案:安装fastclick可以解决双击问题(顺便可以解决点击事件300毫秒延迟问题)// 安装npm install fastclick -S// 引入 (main.js)import FastClick from ‘fastclick’// 使用(main.js)FastClick.attach(document.body);...原创 2021-01-19 14:48:56 · 2085 阅读 · 0 评论 -
video标签特殊属性详解
<video id="video" src="video.mp4" controls = "true" poster="images.jpg" /*视频封面*/ preload="auto" webkit-playsinline="true" /*这个属性是ios 10中设置可以 让视频在小窗内播放,也就是不是全屏播放*/ playsinline="true" /*IOS微信浏览器支持小窗内播放*/ x-webk.原创 2021-01-14 10:47:47 · 4247 阅读 · 0 评论 -
Video自动播放兼容PC端,移动端,最佳方案(IOS、安卓、微信端)
需求:需要在app内嵌中添加背景动态播放,发现pc可以正常播放,放在移动端,部分浏览器会出现各种问题(抓狂ing);_______________________________________________________________________________________________________移动端video的局限:iOS下不能自动播放,需要至少touch一次屏幕,这个有时候还挺烦人的,例如我们想做一个H5 app闪屏的时候就蛋疼了。 不能在中间穿插棒棒的交互效原创 2021-01-14 10:40:00 · 1598 阅读 · 0 评论