1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱 方案一: inputOnFocus(e){ setTimeout(() => { e.target.scrollIntoView(true); // true:元素的顶端将和其所在滚动区的可视区域的顶端对齐; false:底端对齐 }, 200); } 方案二: var timer; // 输入框获得焦点时,将元素设置为position:static,设置timer inputOnFocus(e){ e.target.style.className = 'input input-static'; timer = setInterval(function(){ document.body.scrollTop = document.body.scrollHeight },100) } // 输入框失去焦点时,将元素设置为 position:fixed,清除timer inputOnBlur(e){ e.target.style.className = 'input input-fixed'; clearInterval(timer) } 注释:缺点就是输入的时候不能滑动页面
2跨域的解决办法 1:JSONP方法 原理:利用<script>元素的开放策略,得到从其他来源动态产生的JSON数据,需要对方的服务器做支持 优缺点:兼容性比较好 缺点只支持GET方法 使用:(将回调函数fn作为参数传递给目标地址) <script type="text/javascript"> function fn(data) { alert(data.msg); } </script> <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=fn"></script> 目标地址将传递进来的函数与需要返回的数据拼接成一个字符串. fn({ msg:'this is json data'}) 注释:jQuery中JSONP形式都是GET请求和异步,不存在同步情况,切默认会清楚缓存 $.ajax({ url:"http://crossdomain.com/jsonServerResponse", dataType:"jsonp", type:"get",//可以省略 jsonpCallback:"fn",//->自定义传递给服务器的函数名,而不是使用jQuery自动生成的,可省略 jsonp:"jsonp",//->把传递函数名的那个形参callback变为jsonp,可省略 success:function (data){ console.log(data); } }); 2:CORS方法 原理:CORS通信过程都是浏览器自动完成的,浏览器一旦返现AJAX请求跨域,就会自动添加一些附加的信息头, 因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信. 优缺点:优点在于功能更加强大支持各种HTTP Method,缺点是兼容性不如JSONP 使用: header("Access-Control-Allow-Origin:*"); header("Access-Control-Allow-Methods:POST,GET"); //在服务器端设置同源策略地址 router.get("/userlist", function (req, res, next) { var user = {name: 'Mr.Cao', gender: 'male', career: 'IT Education'}; res.writeHeader(200,{"Access-Control-Allow-Origin":'http://localhost:63342'}); res.write(JSON.stringify(user)); res.end(); }); 3:WebSocket
4:ios不能兼容时间格式中间是横线bug new Date(time.replace(/-/g, '/')).getTime()
5:在H5页面添加一张图片的时候,发现图片无缘多出一个下边距,切并没有元素占据该区域,解决办法是将图片设置为块级元素:dispaly:block
6:火狐浏览器会有一套自己的按钮的边距计算规则 解决办法: button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { border: none; padding:0; }
7:H5拨打电话问题解决
记一次移动端开发H5拨打电话 常见的H5唤起系统拨打电话的使用方法 <a class="none" href="tel:4008196968">拨打电话</a> //如果我们正常的在屏幕点击a标签确实可以进行拨打电话,但是业务需求导致,我们需要使用js代码控制,当我使用jquery触发a标签的点击事件才发现 并没有如我想要的进行拨打电话; 解决办法:触发a标签里面的文字,通过JavaScript的冒泡原理,由浏览器去触发事件进行电话拨打 <a class="none" href="tel:4008196968"><span class="js_lijiWenYi">立即问医</span></a> 后记:看过网上相关资料都说,当我们点击a标签的超链接的时候,实质是点击a标签的文字,从而才打到跳转的目的,如果单纯点击a标签,是不会进行跳转,暂时还没有测试
8:图片移除点击事件 .pointer-none{ pointer-events:none }
9:阻止元素默认事件
e.stopPropagation() 阻止冒泡
e.preventDefault() 阻止点击事件
10:替换手机号 // 匹配手机号首尾,以类似“123****8901”的形式输出 '12345678901'.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
11:设置页面最小高度 { display: block; width: 100%; overflow: hidden; min-height: 100%; min-height: 100vh; }
12:拷贝数组
//拷贝数组 array.slice(1)
13:通过使用scrollTop出发滚动 var currentHeight = $this[0].offsetTop; //找到当前元素距离顶部的滚动距离 $parent.find('.js_allProduct')[0].scrollTop = currentHeight;
14开启移动端调试 开启调试 <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> <script> // 初始化 var vConsole = new VConsole(); console.log('VConsole is cool'); </script>
15 标签中data取值问题
当我们往标签当中使用自定义属性存值,使用data取得自定义属性对象时,所有的属性都是采用小写字符串的形式
16:记一次制作播放器功能出现的问题
新版本的浏览器可能不兼容 音频等自动播放功能;
制作拖动进度条时候,是通过进度条长度除以音频时间,计算拖动的时间,遇到音频未加载成功,导致取值失败
可以通过readyState该字段获取音频的状态
17:webpack4.0 不支持ExtractTextPlugin插件
原因:配置多入口,生成多个html文件时,将css文件打包成一个单独css文件时,发现只打包了一个页面所使用到的css文件,而另一个页面使用到的css文件全都没有进行打包
解决办法
使用MiniCssExtractPlugin插件替代