常用的H5代码你知道吗

1、返回上一页
第一次在手机端用到返回上一页的时候，只写了window.history.go(-1)；这一句。
但是只在安卓手机有效果，兼容苹果手机需要在跳转代码后加上return false；这句。
跳转后刷新页面加上self.location.reload()；这句。

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

复制代码

2、微信浏览器禁止页面下拉
addEventListener()方法向指定元素添加事件句柄。
preventDefault()方法阻止元素发生默认的行为。

1. document.addEventListener('touchmove', function(e) {
   
2.   e.preventDefault();
   
3. }, {
   
4.   passive: false
   
5. });
   
6. document.oncontextmenu = function(e) { //或者return false;
   
7.   e.preventDefault();
   
8. };

复制代码

3、媒体查询
方向：横屏/竖屏
orientation：portrait | landscape
portrait：指定输出设备中的页面可见区域高度大于或等于宽度
landscape： 除portrait值情况外，都是landscape

1. @media screen and (max-width: 320px){ } //宽度
   
2. @media only screen and (orientation: landscape) { } //判断横竖屏

复制代码

4、上传图片显示
将上传的图片显示出来，做后台管理系统的时候有可能会用到。

1. <input type="file" name="image" onchange="show(this)">
   
2. <img id="img" src="" style="display: none;"/>
   
3. // JS代码
   
4. function show(file){  
   
5.   var reader = new FileReader();  // 实例化一个FileReader对象，用于读取文件
   
6.   var img = document.getElementById('img');   // 获取要显示图片的标签  
   
7.   //读取File对象的数据
   
8.   reader.onload = function(evt){
   
9.     img.style.display = 'block';
   
10.     img.src = evt.target.result;
    
11.   }
    
12.   reader.readAsDataURL(file.files[0]);
    
13. }

复制代码

5、长按事件

1. $(".btn").on({  
   
2.   touchstart: function(e) {
   
3.     // 长按事件触发  
   
4.     timeOutEvent = setTimeout(function() {  
   
5.       timeOutEvent = 0;  
   
6.       location.href='www.baidu.com'; //跳转链接
   
7.     }, 400);   
   
8.   },  
   
9.   touchmove: function() {  
   
10.     clearTimeout(timeOutEvent);  
    
11.     timeOutEvent = 0;  
    
12.   },  
    
13.   touchend: function() {  
    
14.     clearTimeout(timeOutEvent);  
    
15.     if (timeOutEvent != 0) {  
    
16.       alert('长按开启');  
    
17.     }  
    
18.     return false;  
    
19.   }  
    
20. })

复制代码

6、根据页面高度调整样式

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

复制代码

7、清除在浏览器上搜索框中的叉号

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

复制代码

8、判断安卓和ios
做H5页面时，安卓和ios在显示上还是有些区别，所以有的时候我会根据不同的手机系统去做适配，写不同的样式。

9、去除点击时产生的背景色

1. *{-webkit-tap-highlight-color: transparent;}

复制代码

此方法用于移动设备点击时产生的背景色

10、背景图填充文字

1. .box {
   
2.      background-image: url(image/bg.jpg);
   
3.      background-size: cover;
   
4.      background-clip: text; //以区块内的文字作为裁剪区域，文字的背景即区块的背景
   
5.      color: transparent; //文字设为透明
   
6.      background-repeat: no-repeat;
   
7. }

复制代码