H5 开发中常见的小问题

1.解决 浏览器 返回按钮不刷新的问题

　window.onpageshow = function(event) {
　　　　if (event.persisted) {
　　　　　　window.location.reload()
　　}};

2.H5 中 JS 禁用安卓手机物理返回键

　　XBack = {};
　　(function(XBack) {
　　　　XBack.STATE = 'x - back';
　　　　XBack.element;

　　　　XBack.onPopState = function(event) {
　　　　　　event.state === XBack.STATE && XBack.fire();
　　　　　　XBack.record(XBack.STATE); //初始化事件时，push一下
　　　　};

　　　　XBack.record = function(state) {
　　　　　　history.pushState(state, null, location.href);
　　　　};

　　　　XBack.fire = function() {
　　　　　　var event = document.createEvent('Events');
　　　　　　event.initEvent(XBack.STATE, false, false);
　　　　　　XBack.element.dispatchEvent(event);
　　　　};

　　　　XBack.listen = function(listener) {
　　　　　　XBack.element.addEventListener(XBack.STATE, listener, false);
　　　　};

　　　　XBack.init = function() {
　　　　　　XBack.element = document.createElement('span');
　　　　　　window.addEventListener('popstate', XBack.onPopState);
　　　　　　XBack.record(XBack.STATE);
　　　　};

　　})(XBack); // 引入这段js文件

　　XBack.init();
　　XBack.listen(function() {});

 

3.解决移动端底部input被弹出的键盘遮挡问题

 　　　　　　// ios 输入框被顶飞
          var inputTimer = null;
          $("#btnBoxInput").on('focus',function(){
            let u = navigator.userAgent;
            let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if (isiOS) {
              console.log('获取焦点了ios')
              var inputText = document.querySelector('#btnBoxInput');
                inputTimer = setInterval( () => {
                  inputText.scrollIntoView(false);
                  console.log('定时器走了')
                },100);
             
                $('.commentBtnBox').addClass('commentabsolute')
            }
          })
　　　　　　

　　　　.commentabsolute {
　　　　　　position: absolute;
　　　　　　bottom: 0.2rem;
　　　　　　left: 0;
　　　　　　display: flex;
　　　　　　align-items: center;
　　　　　　padding: 0 0.4rem;
　　　　　　background: #fff;
　　　　　　z-index: 1001;
　　　　}

 4.计算rem布局

  　　　　// 自适应rem布局
          var FlexBox = {
            init: function () {
              var rootElement = document.documentElement
              this.dpr = window.devicePixelRatio || 1
              this.scale = 1 / this.dpr
              this.rem = rootElement.clientWidth * this.dpr / 10 //获取设备物理像素，并分成10份
              // 设置根元素字体大小
              window.document.documentElement.setAttribute('dpr', this.dpr)
              window.document.documentElement.setAttribute('rem', this.rem)
              document.documentElement.style.fontSize = this.rem / this.dpr + 'px'
              return this
            }
          }
          // 初始化方法
          FlexBox.init()
          //屏幕变化就执行该方法
          window.onresize = function () {
            FlexBox.init()
          }

5.js调用原生方法（需要原生端支持）

/**
 * JSBridgeWrapper
 */

const u = navigator.userAgent;
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

if(isiOS) {
  window.setupWebViewJavascriptBridge = function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'https://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
  }
} else if(isAndroid) {
  window.setupWebViewJavascriptBridge = function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
      callback(WebViewJavascriptBridge)
    } else {
      document.addEventListener('WebViewJavascriptBridgeReady', function() {callback(WebViewJavascriptBridge)}, false);
    }
  }
} else {
  console.log('未知机型')
}

   // 调用
　　window.setupWebViewJavascriptBridge(bridge => {
         bridge.callHandler('pullUpLogin', '', response => {
　　　　　　　　　// 返回的方法
               var  isLog =  JSON.parse(response);
                
         })
  })

 6.在ios 偶然会遇到click 点击第一次不生效 换用 touchstart