通过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的eval()中使用函数的进一步讨论
Jul 26 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
Vue使用NProgress进度条的方法
Sep 21 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中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
前端性能优化及技巧
2016/05/06 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Python reduce()函数的用法小结
2017/11/15 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
django 模型中的计算字段实例
2020/05/19 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
物流管理毕业生自荐信范文
2014/03/15 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
python爬虫--selenium模块
2021/03/31 Python
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS