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

gggggggbong 發布于2019-08-26 10:45 / 2877人閱讀

摘要：返回上一頁第一次在手機端用到返回上一頁的時候，只寫了這一句。但是只在安卓手機有效果，兼容蘋果手機需要在跳轉代碼后加上這句。方法阻止元素發生默認的行為。

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

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

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

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

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

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

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



// 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]);
}

5、長按事件

$(".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;  
  }  
})

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

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

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

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

8、判斷安卓和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{ }

公眾號原文鏈接

GPU云服務器云服務器你知道你應該知道數據分析知道你百度一下你就知道了

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106722.html

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

摘要：返回上一頁第一次在手機端用到返回上一頁的時候，只寫了這一句。但是只在安卓手機有效果，兼容蘋果手機需要在跳轉代碼后加上這句。方法阻止元素發生默認的行為。 1、返回上一頁第一次在手機端用到返回上一頁的時候，只寫了window.history.go(-1)；這一句。但是只在安卓手機有效果，兼容蘋果手機需要在跳轉代碼后加上return false；這句。跳轉后刷新頁面加上self.locati...

CNZPH 2019-08-30 15:44 評論0 收藏0
你不知道的h5

摘要：目前，常用的模塊規范主要有兩種和。攔截全局請求一直接引入腳本攔截需要的回調或函數。深刻知道一個良好的命名規范的重要性，同時在項目中也會遇到一些命名的瓶頸。基于 Three.js 的超快的 3D 開發框架：Whitestorm.js Whitestorm.js 是一款基于 Three.js 超快的 Web 應用 3D 開發框架。它為普通的 Three.js 任務提供封裝、使搭建環境、...

IntMain 2019-08-21 17:57 評論0 收藏0
FED之必備技能

摘要：在我們深入研究這項新鮮的技術之前，讓我們先快速的復習原理的相關知識。同時，希望本文能對大家有所幫助。工欲善其事，必先利其器。 flex.css快速入門，極速布局什么是flex.css? css3 flex 布局相信很多人已經聽說過甚至已經在開發中使用過它，但是我想我們都會有一個共同的經歷，面對它的各種版本，各種坑，傻傻的分不清楚，flex.css就是對flex布局的一種封裝，通過簡潔...

Zachary 2019-08-29 14:00 評論0 收藏0