通过JS自动隐藏手机浏览器的地址栏实现原理与代码


Posted in Javascript onJanuary 02, 2013

大家通过手机自带浏览器打开百度、淘宝,在首页加载完毕后,会自动隐藏页面上方的地址栏,加之这些网站针对手机浏览器做了优化,乍看之下,还真难区分这是WEB APP还是Native App,如下左侧图片为通过safari打开淘宝网的首页,要不是因为底下的浏览器工具栏,还真像Native App。实际上它是有地址的,向下拖动就会看到地址栏,如下右侧图片。

通过JS自动隐藏手机浏览器的地址栏实现原理与代码通过JS自动隐藏手机浏览器的地址栏实现原理与代码

如何才能实现将浏览器地址栏隐藏呢?百度一下,有很多资料,很简单,主要利用window.scrollTo()方法,将当前页面在屏幕上向上滚动,造成地址栏超出视野范围,如下:

<script> 
window.onload=function(){ 
setTimeout(function() { 
window.scrollTo(0, 1) 
}, 0); 
}; 
</script>

但若你做一个简单页面,比如只有一句话,加上如上脚本,你会悲摧的发现,地址栏就是不自动隐藏;难道window.scrollTo()方法在这个浏览器不生效?

但是若你网页内容比较多,超过屏幕高度时,却会自动隐藏地址栏;

如何解决在内容较少时,同样隐藏地址栏呢?需在滚动之前程序动态设置一下body的高度,增加如下代码:

if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) { 
bodyTag = document.getElementsByTagName('body')[0]; 
bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px'; 
}

如下为一个页面示例(默认隐藏地址栏),右图为下拉后看到地址栏的截图:

通过JS自动隐藏手机浏览器的地址栏实现原理与代码通过JS自动隐藏手机浏览器的地址栏实现原理与代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<meta name="viewport" content="width=device-width, initial-scale=1,"> 
<title>我是个网页,但不显示滚动条</title> 
<script> 
window.onload=function(){ 
if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) { 
bodyTag = document.getElementsByTagName('body')[0]; 
bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px'; 
} 
setTimeout(function() { 
window.scrollTo(0, 1) 
}, 0); 
}; 
</script> 
<style> 
/*输入框圆角显示*/ 
input { 
background:#fff; border: 1px solid #080; 
padding:5px; 
-webkit-border-radius:5px; 
} 
/* button 
---------------------------------------------- */ 
.button { 
display: inline-block; 
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ 
*display: inline; 
vertical-align: baseline; 
margin: 0 2px; 
outline: none; 
cursor: pointer; 
text-align: center; 
text-decoration: none; 
font: 14px/100% Arial, Helvetica, sans-serif; 
padding: .5em 2em .55em; 
text-shadow: 0 1px 1px rgba(0,0,0,.3); 
-webkit-border-radius: .5em; 
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
} /* green */ 
.green { 
color: #e8f0de; 
border: solid 1px #538312; 
background: #64991e; 
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)); 
} 
</style> 
</head> 
<body style="background: #ededed;"> 
<div style="padding-top:40%;padding-left:20%"> 
帐号:<input type="text"><br/> 
密码:<input type="text"><br/> 
<div> 
<div style="padding-top:5%;padding-left:23%"><input type="button" class="button green" value="登录"></div> 
</body> 
</html>
Javascript 相关文章推荐
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
js 回车提交表单两种实现方法
Dec 31 #Javascript
event.currentTarget与event.target的区别介绍
Dec 31 #Javascript
jQuery $.data()方法使用注意细节
Dec 31 #Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 #Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 #Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 #Javascript
javascript中的缓动效果实现程序
Dec 29 #Javascript
You might like
E路文章系统PHP
2006/12/11 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
js 操作符汇总
2014/11/08 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
python 判断一个进程是否存在
2009/04/09 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
django 环境变量配置过程详解
2019/08/06 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
python已协程方式处理任务实现过程
2019/12/27 Python
python中return不返回值的问题解析
2020/07/22 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
家长通知书家长评语
2014/04/17 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
医学专业自荐信
2014/06/14 职场文书
反对邪教标语
2014/06/30 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
优秀教师单行材料
2014/12/16 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
校运会加油稿大全
2015/07/22 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技
vue里使用create, mounted调用方法
2022/04/26 Vue.js