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 EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 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桌面中心(四) 数据显示
2007/03/11 PHP
一些使用频率比较高的php函数
2008/10/03 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python中内建函数的简单用法说明
2016/05/05 Python
简单了解python模块概念
2018/01/11 Python
python实现飞机大战游戏
2020/10/26 Python
在python中用url_for构造URL的方法
2019/07/25 Python
对python中return与yield的区别详解
2020/03/12 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
个人简历自我鉴定
2013/10/11 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
安全生产承诺书
2014/03/26 职场文书
元旦晚会开场白
2015/05/29 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL