国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

CNZPH / 2832人閱讀

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

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

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

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

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

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

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

4、上傳圖片顯示
將上傳的圖片顯示出來，做后臺(tái)管理系統(tǒng)的時(shí)候有可能會(huì)用到。



// JS代碼
function show(file){  
  var reader = new FileReader();  // 實(shí)例化一個(gè)FileReader對(duì)象，用于讀取文件
  var img = document.getElementById("img");   // 獲取要顯示圖片的標(biāo)簽  
  //讀取File對(duì)象的數(shù)據(jù)
  reader.onload = function(evt){
    img.style.display = "block";
    img.src = evt.target.result;
  }
  reader.readAsDataURL(file.files[0]);
}

5、長按事件

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

6、根據(jù)頁面高度調(diào)整樣式

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

7、清除在瀏覽器上搜索框中的叉號(hào)

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

8、判斷安卓和ios
做H5頁面時(shí)，安卓和ios在顯示上還是有些區(qū)別，所以有的時(shí)候我會(huì)根據(jù)不同的手機(jī)系統(tǒng)去做適配，寫不同的樣式。

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{ }

公眾號(hào)原文鏈接

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116248.html

相關(guān)文章

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

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

    gggggggbong 評(píng)論0 收藏0

  • 你不知道的h5

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

    IntMain 評(píng)論0 收藏0

  • FED之必備技能

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

    Zachary 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<