javascript获得网页窗口实际大小的示例代码


Posted in Javascript onSeptember 21, 2013

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)

代码实例:
<!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; 
} 
//结果输出至两个文本框 
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"> 
浏览器窗口 的 实际高度: 
<input type="text" name="availHeight" size="4"/> 
<br /> 
浏览器窗口 的 实际宽度: 
<input type="text" name="availWidth" size="4"/> 
<br /> 
</form> 
<script type="text/java script"> 
getPageSize(); 
window.onresize=getPageSize; 
</script> 
</body> 
</html>
Javascript 相关文章推荐
javascript的函数
Jan 31 Javascript
JS backgroundImage控制
May 19 Javascript
JavaScript与DropDownList 区别分析
Jan 01 Javascript
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 #Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 #Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 #Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 #Javascript
script不刷新页面的联动前后代码
Sep 18 #Javascript
js 中的switch表达式使用示例
Jun 03 #Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 #Javascript
You might like
dedecms模板标签代码官方参考
2007/03/17 PHP
php adodb连接不同数据库
2009/03/19 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
python实现通过shelve修改对象实例
2014/09/26 Python
python中元类用法实例
2014/10/10 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
如何获得EntityManager
2014/02/09 面试题
装饰资料员岗位职责
2013/12/30 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
英语故事演讲稿
2014/04/29 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
罗马假日观后感
2015/06/08 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis