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.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
记录一次开发微信网页分享的步骤
May 07 Javascript
vue中jsonp插件的使用方法示例
Sep 10 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 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
vue axios用法教程详解
2017/07/23 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
vue实现选中效果
2020/10/07 Javascript
使用Python读取大文件的方法
2018/02/11 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
python 魔法函数实例及解析
2019/09/25 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
python2 对excel表格操作完整示例
2020/02/23 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
database面试题
2013/03/28 面试题
暑期培训心得体会
2014/09/02 职场文书
2016年寒假生活小结
2015/10/10 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
教师素质教育心得体会
2016/01/19 职场文书
导游词之安徽九华山
2019/09/18 职场文书
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs