這些經常使用的H5代碼你知道嗎

一、返回上一頁
第一次在手機端用到返回上一頁的時候，只寫了window.history.go(-1)；這一句。
可是隻在安卓手機有效果，兼容蘋果手機須要在跳轉代碼後加上return false；這句。
跳轉後刷新頁面加上self.location.reload()；這句。

window.history.go(-1); //返回上一頁
return false; //兼容ios系統
self.location.reload(); //ios刷新頁面

二、微信瀏覽器禁止頁面下拉
addEventListener()方法向指定元素添加事件句柄。
preventDefault()方法阻止元素髮生默認的行爲。

document.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, {
  passive: false
});
document.oncontextmenu = function(e) { //或者return false;
  e.preventDefault();
};

三、媒體查詢
方向：橫屏/豎屏
orientation：portrait | landscape
portrait：指定輸出設備中的頁面可見區域高度大於或等於寬度
landscape： 除portrait值狀況外，都是landscape

@media screen and (max-width: 320px){ } //寬度
@media only screen and (orientation: landscape) { } //判斷橫豎屏

四、上傳圖片顯示
將上傳的圖片顯示出來，作後臺管理系統的時候有可能會用到。

<input type="file" name="image" onchange="show(this)">
<img id="img" src="" style="display: none;"/>
// JS代碼
function show(file){  
  var reader = new FileReader();  // 實例化一個FileReader對象，用於讀取文件
  var img = document.getElementById('img');   // 獲取要顯示圖片的標籤  
  //讀取File對象的數據
  reader.onload = function(evt){
    img.style.display = 'block';
    img.src = evt.target.result;
  }
  reader.readAsDataURL(file.files[0]);
}

五、長按事件

$(".btn").on({  
  touchstart: function(e) { 
    // 長按事件觸發  
    timeOutEvent = setTimeout(function() {  
      timeOutEvent = 0;  
      location.href='www.baidu.com'; //跳轉連接
    }, 400);    
  },  
  touchmove: function() {  
    clearTimeout(timeOutEvent);  
    timeOutEvent = 0;  
  },  
  touchend: function() {  
    clearTimeout(timeOutEvent);  
    if (timeOutEvent != 0) {  
      alert('長按開啓');  
    }  
    return false;  
  }  
})

六、根據頁面高度調整樣式

var height = $(window).height();
if(height>625){
  $('.box').css("margin-top", "10px");
}

七、清除在瀏覽器上搜索框中的叉號

.search::-webkit-search-cancel-button{display: none;}
.search[type=search]::-ms-clear{display: none;}

八、判斷安卓和ios
作H5頁面時，安卓和ios在顯示上仍是有些區別，因此有的時候我會根據不一樣的手機系統去作適配，寫不一樣的樣式。

var u = navigator.userAgent, app = navigator.appVersion;
//android
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; 
//ios
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 
if(isAndroid){ }
else{ }

公衆號原文連接