这些常用的H5代码你知道吗

CNZPH 发布于2019-08-30 15:44 / 2726人阅读

摘要：返回上一页第一次在手机端用到返回上一页的时候，只写了这一句。但是只在安卓手机有效果，兼容苹果手机需要在跳转代码后加上这句。方法阻止元素发生默认的行为。

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

公众号原文链接

私有云服务器托管你知道你应该知道数据分析知道你百度一下你就知道了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116248.html

这些常用的H5代码你知道吗

摘要：返回上一页第一次在手机端用到返回上一页的时候，只写了这一句。但是只在安卓手机有效果，兼容苹果手机需要在跳转代码后加上这句。方法阻止元素发生默认的行为。 1、返回上一页第一次在手机端用到返回上一页的时候，只写了window.history.go(-1)；这一句。但是只在安卓手机有效果，兼容苹果手机需要在跳转代码后加上return false；这句。跳转后刷新页面加上self.locati...

gggggggbong 2019-08-26 10:45 评论0 收藏0
你不知道的h5

摘要：目前，常用的模块规范主要有两种和。拦截全局请求一直接引入脚本拦截需要的回调或函数。深刻知道一个良好的命名规范的重要性，同时在项目中也会遇到一些命名的瓶颈。基于 Three.js 的超快的 3D 开发框架：Whitestorm.js Whitestorm.js 是一款基于 Three.js 超快的 Web 应用 3D 开发框架。它为普通的 Three.js 任务提供封装、使搭建环境、...

li21 2019-08-05 12:32 评论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布局的一种封装，通过简洁...

AndroidTraveler 2019-08-05 12:34 评论0 收藏0
FED之必备技能

摘要：在我们深入研究这项新鲜的技术之前，让我们先快速的复习原理的相关知识。同时，希望本文能对大家有所帮助。工欲善其事，必先利其器。 flex.css快速入门，极速布局什么是flex.css? css3 flex 布局相信很多人已经听说过甚至已经在开发中使用过它，但是我想我们都会有一个共同的经历，面对它的各种版本，各种坑，傻傻的分不清楚，flex.css就是对flex布局的一种封装，通过简洁...

Zachary 2019-08-29 14:00 评论0 收藏0