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常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 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中文件上传的安全问题
2006/10/09 PHP
一个捕获函数输出的函数
2007/02/14 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
实例讲解PHP表单处理
2019/02/15 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
Python文件去除注释的方法
2015/05/25 Python
Python中字典和集合学习小结
2017/07/07 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
运动会方阵解说词
2014/02/12 职场文书
2014年保育员工作总结
2014/12/02 职场文书
保卫工作个人总结
2015/03/03 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang