首页 > web前端 > js教程 > 通过JS自动隐藏手机浏览器的地址栏实现原理与代码_javascript技巧

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

WBOY
发布: 2016-05-16 17:44:42
原创
1538 人浏览过

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

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

复制代码 代码如下:

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

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

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

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

复制代码 代码如下:

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

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

复制代码 代码如下:






我是个网页,但不显示滚动条
<script> <BR>window.onload=function(){ <BR>if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) { <BR>bodyTag = document.getElementsByTagName('body')[0]; <BR>bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px'; <BR>} <BR>setTimeout(function() { <BR>window.scrollTo(0, 1) <BR>}, 0); <BR>}; <BR></script>




帐号:

密码:





相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板