通过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 相关文章推荐
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
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
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
destoon数据库表说明汇总
2014/07/15 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
php代码架构的八点注意事项
2016/01/25 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
面料业务员岗位职责
2013/12/26 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
小学生作文评语
2014/04/18 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS