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实现多域名不同文件的调用方法
Jan 12 Javascript
javascript jQuery $.post $.ajax用法
Jul 09 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
vue制作抓娃娃机的示例代码
Apr 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网站地图生成类示例
2014/01/13 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
PHP查询分页的实现代码
2017/06/09 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
filemanage功能中用到的common.js
2007/04/08 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
vue中appear的用法
2017/08/17 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
大韩航空官方网站:Korean Air
2017/10/25 全球购物
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
小学生勤俭节约演讲稿
2014/08/28 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
中小企业员工手册范本
2015/05/14 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
大学班长竞选稿
2015/11/20 职场文书
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python