快捷導(dǎo)航

javascript獲得網(wǎng)頁(yè)窗口實(shí)際大小的示例代碼

更新時(shí)間：2013年09月21日 09:26:15 作者：

網(wǎng)頁(yè)窗口實(shí)際大小如何獲得，可行的方法有很多，在本文將為大家介紹下使用javascript是怎樣做到的

javascript代碼：

 
function get_page_size() 
{ 
var re = {}; 
if (document.documentElement && document.documentElement.clientHeight) 
{ 
var doc = document.documentElement; 
re.width = (doc.clientWidth>doc.scrollWidth)?doc.clientWidth-1:doc.scrollWidth; 
re.height = (doc.clientHeight>doc.scrollHeight)?doc.clientHeight:doc.scrollHeight; 
} 
else 
{ 
var doc = document.body; 
re.width = (window.innerWidth>doc.scrollWidth)?window.innerWidth:doc.scrollWidth; 
re.height = (window.innerHeight>doc.scrollHeight)?window.innerHeight:doc.scrollHeight; 
} 
return re; 
} 
904 viewed 3 comment(s) 

代碼實(shí)例：

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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>獲取窗口大小</title> 
<script type="text/java script"> 
function getPageSize() 
{ 
var re = {}; 
if (document.documentElement && document.documentElement.clientHeight) 
{ 
var doc = document.documentElement; 
re.width = (doc.clientWidth>doc.scrollWidth)?doc.clientWidth-1:doc.scrollWidth; 
re.height = (doc.clientHeight>doc.scrollHeight)?doc.clientHeight:doc.scrollHeight; 
} 
else 
{ 
var doc = document.body; 
re.width = (window.innerWidth>doc.scrollWidth)?window.innerWidth:doc.scrollWidth; 
re.height = (window.innerHeight>doc.scrollHeight)?window.innerHeight:doc.scrollHeight; 
} 
//結(jié)果輸出至兩個(gè)文本框 
document.form1.availHeight.value= re.width; 
document.form1.availWidth.value= re.height; 
return re; 
} 
</script> 
</head> 
<body> 
<form action="#" method="get" name="form1" id="form1"> 
瀏覽器窗口 的 實(shí)際高度: 
<input type="text" name="availHeight" size="4"/> 
<br /> 
瀏覽器窗口 的 實(shí)際寬度: 
<input type="text" name="availWidth" size="4"/> 
<br /> 
</form> 
<script type="text/java script"> 
getPageSize(); 
window.onresize=getPageSize; 
</script> 
</body> 
</html> 

相關(guān)文章

JavaScript實(shí)現(xiàn)點(diǎn)擊切換驗(yàn)證碼及校驗(yàn)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊切換驗(yàn)證碼及校驗(yàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
bootstrap table表格插件使用詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap table表格插件使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
js神秘的電報(bào)密碼哈弗曼編碼實(shí)現(xiàn)
這篇文章主要介紹了js神秘的電報(bào)密碼哈弗曼編碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
Javascript 模式實(shí)例中介者模式
頁(yè)面上，用戶會(huì)有很多的操作，每進(jìn)行一次操作我們需要去展示操作的結(jié)果，在這里我們有了一個(gè)問(wèn)題，我們應(yīng)如何去展示不同的結(jié)果呢？
2010-04-04
webpack學(xué)習(xí)筆記之優(yōu)化緩存、合并、懶加載
這篇文章主要介紹了webpack學(xué)習(xí)筆記之優(yōu)化緩存、合并、懶加載，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
微信小程序動(dòng)畫組件使用解析，類似vue，且更強(qiáng)大
這篇文章主要介紹了微信小程序動(dòng)畫組件，類似vue，且更強(qiáng)大使用解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
js滑動(dòng)提示效果代碼分享
這篇文章主要為大家分享了js滑動(dòng)提示效果代碼，實(shí)現(xiàn)方法簡(jiǎn)單，感興趣的小伙伴們可以參考一下
2016-03-03
Bootstrap 布局組件（全）
這篇文章主要為大家詳細(xì)介紹了Bootstrap布局組件，感興趣的小伙伴們可以參考一下
2016-07-07
如何高效率去掉js數(shù)組中的重復(fù)項(xiàng)
如何高效率去掉js數(shù)組中的重復(fù)項(xiàng)呢？下面小編就為大家?guī)?lái)一篇高效率去掉js數(shù)組中重復(fù)項(xiàng)的實(shí)現(xiàn)方法。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2016-04-04
uniapp小程序之配置首頁(yè)搜索框功能的實(shí)現(xiàn)
這篇文章主要介紹了uniapp小程序之配置首頁(yè)搜索框,我們介紹一下本次開發(fā)使用的是uniapp，本次分享內(nèi)容的搜索框?yàn)榻馆斎胨阉骺?，點(diǎn)擊跳轉(zhuǎn)專屬搜索頁(yè)面，需要的朋友可以參考下
2022-09-09