常用的H5代码

更新时间:2022-04-27 15:59:09点击次数:1092次

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、上传图片显示
将上传的图片显示出来,做后台管理系统的时候有可能会用到。

复制代码
<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]);
}
复制代码

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

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息