通过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 相关文章推荐
不错的JS中变量相关的细节分析
Aug 13 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 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 xml文件操作实现代码(二)
2009/03/20 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
yii操作cookie实例简介
2014/07/09 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
vue-loader教程介绍
2017/06/14 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
用Python写一段用户登录的程序代码
2018/04/22 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
2014信息公开实施方案
2014/02/22 职场文书
二手房购房意向书范本
2014/04/01 职场文书
小学一年级学生评语
2014/04/22 职场文书
青年文明号口号
2014/06/17 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
React Fragment介绍与使用详解
2021/11/11 Javascript
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server