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 冒号 使用说明
Jun 06 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 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
PHP array_push 数组函数
2009/12/26 PHP
解析link_mysql的php版
2013/06/30 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
将php数组输出html表格的方法
2014/02/24 PHP
php类自动加载器实现方法
2015/07/28 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
python生成二维码的实例详解
2017/10/29 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
python 美化输出信息的实例
2018/10/15 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
Python数据可视化之画图
2019/01/15 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
python 追踪except信息方式
2020/04/25 Python
PyQt5实现简单的计算器
2020/05/30 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
《湘夫人》教学反思
2014/02/21 职场文书
公益广告标语
2014/06/19 职场文书
语文教研活动总结
2014/07/02 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript