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 相关文章推荐
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
JS如何判断json是否为空
Jul 06 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 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
laravel使用数据库测试注意事项
2020/04/10 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
python 获取et和excel的版本号
2009/04/09 Python
python查找第k小元素代码分享
2013/12/18 Python
python实现textrank关键词提取
2018/06/22 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
教师求职简历自我评价
2015/03/10 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
军训通讯稿范文
2015/07/18 职场文书
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫