移动端网页兼容性总结

1.关于alert,confirm
  在微信内置浏览器里面，默认的alert，confirm是会连着网页的域名一起弹出在页面上的，解决办法如下：
  window.confirm = function (message) {
      var iframe = document.createElement("IFRAME");
      iframe.style.display = "none";
      iframe.setAttribute("src", 'data:text/plain,');
      document.documentElement.appendChild(iframe);
      var alertFrame = window.frames[0];
      var result = alertFrame.window.confirm(message);
      iframe.parentNode.removeChild(iframe);
      return result;
  };


  if(window.confirm('你想让用户选择的内容')){
      location.href = 'index.html';
  }


  window.alert = function(name){
      var iframe = document.createElement("IFRAME");
      iframe.style.display="none";
      iframe.setAttribute("src", 'data:text/plain,');
      document.documentElement.appendChild(iframe);
      window.frames[0].window.alert(name);
      iframe.parentNode.removeChild(iframe);
  }


  alert('你想警告给用户的内容')
  注意重写confirm的时候是需要返回结果的，不然点确认和取消的时候，都会执行取消下面对应的方法。


2.关于禁止浏览器的长按事件
  不管是在微信内置的浏览器里面，还是在普通的浏览器里面，长按界面的某一部分内容是会有响应的，这时候如果你还有其他的长按事件需要实现，你需要这样做：
  window.addEventListener('contextmenu', function(e){
      e.preventDefault();
  });


3.关于设备系统的回退事件
  当你在实现某些直播或者游戏的界面显示的时候，点击了系统的回退事件是会关掉当前页面的，也就是说游戏进程和直播可能会中断，这时候你需要自己画一个回退按钮来替代系统的回退按钮，并完成其他你想完成的操作，这个时候你需要：
  function forbidBack () {
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', function () {
        history.pushState(null, null, document.URL);
    });
  }
  然后在你想禁用回退的页面forbidBack();就可以啦。


4.关于下拉刷新和上拉加载
  常用的实现方法是mui和iscroll，在这里推荐使用iscroll，如果你的整个项目的ui布局都是借助mui框架来实现的，那么你还是乖乖的用mui实现上拉加载和下拉刷新吧，如果不是，千万要抛弃mui，不然你会发现，坑坑是在是太多，实在是有太多的地方和你写好的代码性格不合，比如，a标签点击事件会失效，比如整个页面的点击事件会失效，比如等等等等，至于失效的原理和解决办法，请感兴趣的童鞋自行百度。
  使用iscroll的时候需要注意，一定要先把官方的demo多玩几遍！！！注意，请在你的html中引入名字是scroll-probe.js的文件哟，不然你检测不到滚动事件哟，还有要记得在iscroll的配置中加上probeType: 2,不然你的#scroll滚不动哟，还有要记得在配置iscroll的时候加上preventDefaultException: { tagName: /^(P|B|H1|H2|DIV|A|INPUT|TEXTAREA|BUTTON|SELECT)$/ },不然你的按钮啊，a标签啊，表单元素啊，会统统失效的哟！（是在初始化iscroll的时候），如果你的需求里有那种tab切换的界面，记得每次实现切换的时候加上$('#scroller').css('transform','translate(0px,0px)');不然你的测试小姐姐（小哥哥）会给你提bug的哟！还有要记得，#scroll要有一个固定的高哟，不然，不然你自己试试好啦！亲测好用的下拉刷新上拉加载事件：
  function getMoreData(refresh,loadmore) {
  $(window).scroll(function(){


    var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度
    var scrollHeight = $(document).height();   //当前页面的总高度
    var clientHeight = $(this).height();    //当前可视的页面高度
    if(scrollTop + clientHeight >= scrollHeight){   //距离顶部+当前高度 >=文档总高度 即代表滑动到底部 count++;         //每次滑动count加1
      // filterData(serviceTypeId,industryId,cityId,count); //调用筛选方法，count为当前分页数




      if(loadmore){
        loadmore();
      }
    }else if(scrollTop<=0){
      //滚动条距离顶部的高度小于等于0
      if(refresh){
        refresh();
      }
    }
  });
}
调用的时候getMoreData(fn1,fn2);就可以了哟！


5.关于回调函数
  前端基础知识，结构代码如下：
  var first = function (callback) {
    var variableA = 'this is a veriable belongs to the first function'
    alert('this is the first function')
    callback(variableA)
  }


  var ele = document.getElementById('start')


  ele.onclick = function () {
    first(function(variableA) {
      alert(variableA)
    })
  }


6.下班了，先到这里吧！