常见问题解决

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插件替代

 

18：移动端解决iPhone手机物理返回时，页面不自动刷新

解决办法：
    function IOSAutoReload(){
        var isPageHide = false;
        window.addEventListener('pageshow', function () {
            if (isPageHide) {
                window.location.reload();
            }
        });
        window.addEventListener('pagehide', function () {
            isPageHide = true;
        });
    }

 

19：解决滚动条样式代码
 <style>
    .innerbox{
        overflow-y: auto;
        background-color: #f8f8f8;
        height: 200px;
        padding: 10px;
    }
        .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
            width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 4px;
            scrollbar-arrow-color:red;

        }
        .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
            scrollbar-arrow-color:red;
        }
        .innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;
            background: rgba(0,0,0,0.1);
        }

    </style>