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的index方法实现tab效果
Feb 16 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
实例分析js事件循环机制
Dec 13 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 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日期处理函数 整型日期格式
2011/01/12 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
php错误日志简单配置方法
2016/07/11 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
如何基于Python实现自动扫雷
2020/01/06 Python
python开发前景如何
2020/06/11 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
水果连锁超市创业计划书
2014/01/24 职场文书
创业女性典型材料
2014/05/02 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
2016年清明节寄语
2015/12/04 职场文书
青年教师听课心得体会
2016/01/15 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers