通过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 相关文章推荐
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 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
介绍几个array库的新函数 php
2006/12/29 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
学习php分页代码实例
2013/10/24 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
js图片预加载示例
2014/04/30 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
使用console进行性能测试
2015/04/27 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
python字符串,数值计算
2016/10/05 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
Python如何发布程序的详细教程
2018/10/09 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
Python中函数的返回值示例浅析
2019/08/28 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
大学毕业感言一句话
2014/02/06 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android