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 相关文章推荐
jQuery live
May 15 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
jquery处理json对象
Nov 03 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
js实现拖拽与碰撞检测
Sep 18 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对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
PHP反射学习入门示例
2019/06/14 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
js面向对象编程总结
2017/02/16 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python常用模块介绍
2014/11/21 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
丑小鸭教学反思
2014/02/03 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
行政主管职责范本
2014/03/07 职场文书
新年主持词
2014/03/27 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
金砖之国观后感
2015/06/11 职场文书
贷款工资证明范本
2015/06/12 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
SpringBoot 集成Redis 过程
2021/06/02 Redis