js隐藏手机浏览器地址栏

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

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

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

版的实现方法：

1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

IOS版的实现方法：

给页面添加一个载入事件的监听；

页面载入完成后，延迟100毫秒后使页面向上移动一部分，使地址栏隐藏掉。

js代码如下：

1
2
3
4
5

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

不难发现，如果页面高度不够的情况下，这个方法是没办法隐藏地址栏的。

解决方法就是在滚动页面的时候，给页面设置一个高度。

修改后的代码如下：

1
2
3
4

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