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

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

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

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云服务器你知道你应该知道数据分析知道你百度一下你就知道了

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

转载请注明本文地址：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 任务提供封装、使搭建环境、...

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