快捷導(dǎo)航

通過(guò)JS自動(dòng)隱藏手機(jī)瀏覽器的地址欄實(shí)現(xiàn)原理與代碼

更新時(shí)間：2013年01月02日 09:09:16 作者：

大家通過(guò)手機(jī)自帶瀏覽器打開(kāi)百度、淘寶，在首頁(yè)加載完畢后，會(huì)自動(dòng)隱藏頁(yè)面上方的地址欄,感興趣的朋友可以參考下

大家通過(guò)手機(jī)自帶瀏覽器打開(kāi)百度、淘寶，在首頁(yè)加載完畢后，會(huì)自動(dòng)隱藏頁(yè)面上方的地址欄，加之這些網(wǎng)站針對(duì)手機(jī)瀏覽器做了優(yōu)化，乍看之下，還真難區(qū)分這是WEB APP還是Native App，如下左側(cè)圖片為通過(guò)safari打開(kāi)淘寶網(wǎng)的首頁(yè)，要不是因?yàn)榈紫碌臑g覽器工具欄，還真像Native App。實(shí)際上它是有地址的，向下拖動(dòng)就會(huì)看到地址欄，如下右側(cè)圖片。

如何才能實(shí)現(xiàn)將瀏覽器地址欄隱藏呢？百度一下，有很多資料，很簡(jiǎn)單，主要利用window.scrollTo()方法，將當(dāng)前頁(yè)面在屏幕上向上滾動(dòng)，造成地址欄超出視野范圍，如下：

復(fù)制代碼代碼如下:

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

但若你做一個(gè)簡(jiǎn)單頁(yè)面，比如只有一句話(huà)，加上如上腳本，你會(huì)悲摧的發(fā)現(xiàn)，地址欄就是不自動(dòng)隱藏；難道window.scrollTo()方法在這個(gè)瀏覽器不生效？

但是若你網(wǎng)頁(yè)內(nèi)容比較多，超過(guò)屏幕高度時(shí)，卻會(huì)自動(dòng)隱藏地址欄；

如何解決在內(nèi)容較少時(shí)，同樣隱藏地址欄呢？需在滾動(dòng)之前程序動(dòng)態(tài)設(shè)置一下body的高度，增加如下代碼：

復(fù)制代碼代碼如下:

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

如下為一個(gè)頁(yè)面示例（默認(rèn)隱藏地址欄），右圖為下拉后看到地址欄的截圖：

復(fù)制代碼代碼如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<meta name="viewport" content="width=device-width, initial-scale=1,"> 
<title>我是個(gè)網(wǎng)頁(yè)，但不顯示滾動(dòng)條</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%"> 
帳號(hào)：<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>