js隐藏手机浏览器地址栏

最新推荐文章于 2024-04-24 09:22:16 发布

shuytu

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量5.2k

点赞数

分类专栏：技术文章标签：浏览器导航 javascript

技术专栏收录该内容

27 篇文章 0 订阅

订阅专栏

医院的项目，由于采用的是Web APP模式，移动护理平台，对于操作的护士来说不需要他们输入和修改浏览器地址，找了很久的解决方案，一直没找到有效的能够隐藏浏览器地址栏和下部导航栏的方法，有介绍采用window.scrollTo()实现的，但是治标不治本，实现的效果有限，附上代码大家也可以探讨一下。今天看到一个帖子介绍方法的，实验了一下效果蛮不错，推荐一下。

有效的方法：（此方法效果较好，建议采用）

Android 和 ios两个平台要用不同的实现方法。

Android版的实现方法：

function hideAddressBar_android(){
	var self = document.getElementsByTagName('body')[0];
	if (self.requestFullscreen) {
		//html5新增的全屏方法
		self.requestFullscreen();
	} else if (self.mozRequestFullScreen) {
		//针对mozlia内核的hack
		self.mozRequestFullScreen();
	} else if (self.webkitRequestFullScreen) {
		//针对webkit内核的hack
		self.webkitRequestFullScreen();
	}
};

执行上面那段代码就可以让页面进入全屏模式，底部导航，和顶部的地址栏是看不到的喔~

IOS版的实现方法：

给页面添加一个载入事件的监听；
页面载入完成后，延迟100毫秒后使页面向上移动一部分，使地址栏隐藏掉。

js代码如下：

window.addEventListener('load', function(){
    setTimeout(function(){ 
        window.scrollTo(0, 1); 
    }, 100);
});

不难发现，如果页面高度不够的情况下，这个方法是没办法隐藏地址栏的。
解决方法就是在滚动页面的时候，给页面设置一个高度。

修改后的代码如下：

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

最后，还要记得在head里加上这两句：

1 2	`<meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes"/>`

转自：http://www.vqianduan.com/245.html

方法2：（此方法实现的效果不好，不建议采用）

主要利用window.scrollTo()方法，将当前页面在屏幕上向上滚动，造成地址栏超出视野范围，如下：

[javascript]view plaincopy 
   
 <script>  
     window.οnlοad=function(){  
         setTimeout(function() {  
             window.scrollTo(0, 1)  
         }, 0);  
     };  
 </script>  

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

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

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

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

如下为一个页面示例（默认隐藏地址栏），右图为下拉后看到地址栏的截图：

如上截图的完整源码如下：

[html]view plaincopy 
   
 <!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>  

如上按钮的效果，参考自：http://www.webdesignerwall.com/demo/css-buttons.html

要实现更为完整的隐藏地址栏的效果，可参考：http://menacingcloud.com/?c=iPhoneAddressBar

转自：http://blog.csdn.net/hbcui1984/article/details/8350107

shuytu

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js隐藏手机浏览器地址栏

医院的项目，由于采用的是Web APP模式，移动护理平台，对于操作的护士来说不需要他们输入和修改浏览器地址，找了很久的解决方案，一直没找到有效的能够隐藏浏览器地址栏和下部导航栏的方法，有介绍采用window.scrollTo()实现的，但是治标不治本，实现的效果有限，附上代码大家也可以探讨一下。今天看到一个帖子介绍方法的，实验了一下效果蛮不错，推荐一下。有效的方法：（此方法效果较好
复制链接

扫一扫